杭州p2p网站开发商,成都网站建设小程序,c# 网站开发实例教程,厦门思总建设有限公司网站类似下面这个图形#xff0c;只使用一个标签#xff0c;可以有多少种实现方式#xff1a;(不考虑兼容性的情况下) 假设我们的单标签为
div
: 定义如下通用 CSS: div{ position:relative; width: 180px; height: 180px; } NO.1 方案一#xff1a;div上是棕色背景#xf…类似下面这个图形只使用一个标签可以有多少种实现方式(不考虑兼容性的情况下) 假设我们的单标签为
div
: 定义如下通用 CSS: div{ position:relative; width: 180px; height: 180px; } NO.1 方案一div上是棕色背景伪类是白色背景 在div的css上加背景和border div{ position:relative; width: 180px; height: 180px; background:#9c27b0; border:20px dashed #2196f3; } 再加一个伪类 div:after
{ content:; position:absolute; top:0; left:0; bottom:0; right:0; background:#fff; } NO.2 方案二div上是白色背景伪类是棕色背景 (主要是background-clip及z-index实现) 在div的css上加背景和border div{ position:relative; width: 180px; height: 180px; background:#fff; background-clip:padding-box; border:20px dashed #2196f3; } 再加一个伪类 div:after
{ content:; position:absolute; top:-20px; left:-20px; bottom:-20px; right:-20px; background:#9c27b0; z-index:-1; } 转载请注明前端录»从条纹边框的实现谈盒子模型 script srchttp://www.wozhuye.com/index.php?mdiggcindexainitid4-347-2/script
