从条纹边框的实现谈盒子模型

类似下面这个图形，只使用一个标签，可以有多少种实现方式：(不考虑兼容性的情况下)

假设我们的单标签为

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;

}

转载请注明：前端录»从条纹边框的实现谈盒子模型

从条纹边框的实现谈盒子模型相关推荐

从条纹边框的实现谈盒子模型（转）
类似下面这个图形,只使用一个标签,可以有多少种实现方式: 假设我们的单标签为 div: 1 <div></div> 定义如下通用 CSS: 1 2 3 4 5 div{ ...
【CSS】盒子边框 ① ( 网页布局本质 | 盒子模型 | 盒子边框 Border | border-width 宽度 | border-style 边框样式 | 边框颜色 | 边框设置综合写法 )
文章目录一.网页布局本质二.盒子模型三.盒子边框 Border 1.CSS 2.0 文档查询 2.边框设置语法 3.边框设置综合写法一.网页布局本质构建一个网页 , 首先 , 创建盒子模型 ...
html盒子左右边框边距,CSS盒子模型、内外边距、边框、行高、背景
1.盒子模型所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器.每个矩形都由元素的内容.内边距(padding).边框(border)和外边距(margin)组成. ...
前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)
前端面试题 HTML5 相关面试题 CSS3 相关面试题盒子模型盒子水平垂直居中的方案经典布局方案圣杯布局双飞翼布局 flex布局定位方式布局 css实现三角形 JS 相关面试题 8种数据 ...
12CSS中的盒子模型
页面布局要学习三大核心,盒子模型.浮动和定位.学好盒子模型能非常好的帮助我们布局. 1.看透网页布局的本质网页布局过程: 先准备好相关的网页元素,网页元素基本都是盒子Box: 利用CSS设置好盒子样 ...
html盒子标准模型,CSS——（二）盒子模型与标准流
CSS--(2)盒子模型与标准流上篇博客<CSS--(1)基础>中简单介绍了CSS的概念和几种使用方法,现在主要是介绍其的核心内容. 盒子模型为了理解盒子模型,我们可以先从生活中的盒子 ...
cs字体样式和盒子模型学习1
CSS学习笔记3 文本样式2 1.文本颜色设置-属性:color 属性值:颜色的英文单词表示/HEX(三原色16进制)/RGBa(三原色十进制),该模式还支持对不透明度的设置a,他表示不透明度,取值区 ...
盒子模型属性详解及案例
盒子模型所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器. 每个矩形都由元素的内容(content).内边距(padding).边框(border)和外边距(ma ...
css盒子模型相关知识点二
目录一.垂直布局二.外边距的折叠三.内联元素的盒子四.默认样式五.盒子的大小六.阴影和圆角一.垂直布局使用overflow属性设置父元素如何处理溢出的子元素: 可选值: visible ...

从条纹边框的实现谈盒子模型

类似下面这个图形，只使用一个标签，可以有多少种实现方式：(不考虑兼容性的情况下)

从条纹边框的实现谈盒子模型相关推荐

最新文章

热门文章