0.单边框
width: 100px;
height: 100px;
background-color: chartreuse;
border: 2px dashed rgb(236, 47, 47);
默认情况背景颜色会延伸到边框下这时候用
background-clip: padding-box;
透明边框的创建
width: 100px;
height: 100px;
background: white;
border: 10px solid hsla(0,0%,100%,.5);
background-clip: padding-box;
-
多重边框
利用box-shadown模拟多重边框
width: 100px;
height: 100px;
background-color: chartreuse;
border: 5px solid rgb(236, 47, 47);
box-shadow: 0px 0px 0px 10px #655;
其中box-shadown可以接受多组阴影,用来模拟多重边框
box-shadow: 0px 0px 0px 10px #655,0px 0px 0px 20px royalblue;
box-shadown的缺陷在于只能模拟外部多重边框且只能是solid,但是outline可以做到模拟边框甚至是用虚线 ,它的缺陷是只能模拟两重的边框
background: yellowgreen;
border: 10px solid #655;
outline: 2px dashed deeppink;
outline-offset:-5px;
-
position
background: url(“show.png”) no-repeat #58a;
background-position: right 20px bottom 20px;
定义了图片位置
background-origin: content-box;
定义了图片起始的位置 -
边内圆角
background: #58a;
border-radius: 10%;
outline: .6em solid #655
普通圆角边框的缺陷如下
box-shadown解决如下box-shadow: 0px 0px 0px 5px #655;
-
条纹渐变
background: linear-gradient(#fb3 20%, #58a 80%);
background: linear-gradient(#fb3 50%, #58a 50%);
background: linear-gradient(#fb3 10%, #58a 50%);
竖条纹
background: linear-gradient(to right, /* 或 90deg */ #fb3 50%, #58a 0);
background-size: 30px 100%;
斜条纹
background: repeating-linear-gradient(45deg,#fb3, #fb3 15px, #58a 0, #58a 30px);
横条纹
background: linear-gradient(#fb3 50%, #58a 50%);
background-size: 100% 30px;
利用渐变完成网格效果
background: #58a;
background-image:
linear-gradient(white 1px, transparent 0),
linear-gradient(90deg, white 1px, transparent 0);
background-size: 30px 30px;
利用径向渐变产生波点
background-image:radial-gradient(rgb(140, 210, 204) 30%, transparent 0);
background-size: 30px;
棋盘
background: #eee;
background-image:
linear-gradient(45deg, #bbb 25%, transparent 0),
linear-gradient(45deg, transparent 75%, #bbb 0);
background-size: 30px 30px;
background-position: 0px 0px ,15px 15px;
信封边框
padding: 1em;
border: 16px solid transparent;
border-image: 16 repeating-linear-gradient(-45deg,red 0, red 1em,transparent 0, transparent 2em, #58a 0, #58a 3em,transparent 0, transparent 4em);