css實現的交叉邊框效果
本章節分享一段程式碼例項,它利用css3實現了交叉邊框效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> .main{ width:200px; height:200px; position:relative; float:left; margin:20px; } .box1:after{ content:''; position:absolute; width:100%; height:1px; background-color:#000; top:10px; box-shadow:#000 0 170px; } .box1:before{ content:''; position:absolute; height:100%; width:1px; background-color:#000; left:10px; box-shadow:#000 170px 0px; } .box2{ background-image:linear-gradient( to right, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 20px, rgba(0,0,0,1) 20px, rgba(0,0,0,1) 21px, rgba(0,0,0,0) 21px, rgba(0,0,0,0) 180px, rgba(0,0,0,1) 180px, rgba(0,0,0,1) 181px, rgba(0,0,0,0) 181px, rgba(0,0,0,0) 200px), linear-gradient( to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 20px, rgba(0,0,0,1) 20px, rgba(0,0,0,1) 21px, rgba(0,0,0,0) 21px, rgba(0,0,0,0) 180px, rgba(0,0,0,1) 180px, rgba(0,0,0,1) 181px, rgba(0,0,0,0) 181px, rgba(0,0,0,0) 200px); } </style> </head> <body> <div class="main box1"></div> <div class="main box2"></div> </body> </html>
相關文章
- CSS3實現多樣的邊框效果CSSS3
- CSS 實現仿 Windows10 滑鼠照亮邊框效果CSSWindows
- 小視訊原始碼,CSS 實現半透明邊框效果原始碼CSS
- 強大的CSS :實現仿 Windows10 滑鼠照亮邊框效果CSSWindows
- CSS實現流動邊框CSS
- CSS圖片邊框陰影效果CSS
- CSS3多層邊框效果CSSS3
- CSS虛線邊框效果程式碼CSS
- css-虛線邊框滾動效果CSS
- CSS3邊框動態環繞效果CSSS3
- 如何實現css漸變圓角邊框CSS
- 【基礎】CSS實現多重邊框的5種方式CSS
- 用js(hover )+css實現下拉框效果(有效果圖)JSCSS
- 漸變邊框文字效果?CSS 輕鬆拿捏!CSS
- CSS 邊框陰影立體邊框CSS
- CSS border邊框CSS
- 強大的CSS:實現平行四邊形佈局效果CSS
- CSS實現漸變色邊框(Gradient borders)的5種方法CSS
- CSS mask-image 實現邊緣淡出過渡效果CSS
- 那些特殊邊框效果在報表中要怎樣實現?
- css實現四種常見邊框內外角組合CSS
- 巧用 CSS 實現炫彩三角邊框動畫CSS動畫
- 利用SVG和css3實現炫酷的邊框動畫SVGCSSS3動畫
- css圓角矩形邊框CSS
- CSS 3半透明邊框CSS
- 立體感的邊框陰影效果
- 1px 邊框的實現方法
- 如何實現特殊的邊框樣式
- CSS的秘密——背景和邊框(下)CSS
- css 實現打分效果CSS
- div+css實現邊框緊貼瀏覽器四周CSS瀏覽器
- 小影片軟體開發,實現一個CSS邊框動畫CSS動畫
- backdrop-filter(純CSS實現絲滑邊框線條動畫)FilterCSS動畫
- 視訊直播原始碼,css實現圖片對角邊框線原始碼CSS
- CSS 奇技淫巧 | 巧妙實現文字二次加粗再加邊框CSS
- 【叢林】CSS 邊框淺談CSS
- CSS border-radius 帶邊框CSS
- CSS 邊框動態環繞CSS
- 教你玩轉CSS border(邊框)CSS