背景和边框
(1).半透明边框: rgba hlsa
H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
S：Saturation(饱和度)。取值为：0.0% - 100.0%
L：Lightness(亮度)。取值为：0.0% - 100.0%
A：Alpha透明度。取值0~1之间。
Css2.1中,背景的工作原理:
默认情况下,背景会延伸到边框所在区域的下层,不管使用的是透明的边框还是不透明的边框,这个事实都不会改变.
background-clip:padding-box;背景会被元素的border box(边距的外沿框)裁切掉,如若不希望背景入侵边框,则设置其值为padding-box,浏览器会用内边距的外沿裁切掉背景.
background:white;
border:10px solid hsla(0,0%,100%,.5);
background-clip:padding-box;
}
(2)多重边框:
(1.Box-shadow:支持符号分隔语法,可以创建任意数量的投影.需要注意的是,这个投影是层层叠加的,第一层投影位于最顶层,因此需要按照规律来一次扩张半径,例如.
box-shadow:0 0 0 10px #655,0 0 0 15px deeppink;
Ps:投影不影响布局,也不受boxr-sizing.属性影响.
(2.outline(描边)方法,一般是可能只需要两层边框,有虚线(dashed)设置,例如简单的缝边效果.有一个bug就是outline属性不会贴合元素的圆角.
Outline-offset属性控制描边与边框的距离,并且接受负值.
(3)灵活的背景定位.
(1.Background-position.指定背景图片和任意角的偏移量,并且这个偏移量默认指的是距离内边距的外沿框(padding box)的距离,这样边框就不会遮住背景图片.
background:url(11.png)no-repeat left bottom;
background-position:right 0px bottom 0px;
Ps:每个元素身上有三个矩形框,分别是:border box,padding box,content box;
Background-origin.
background:url(11.png)no-repeat left bottom;
background-position:content-box;
(2.Calc()方法:
(4)边框内圆角.
若用两个元素可以是:两个div嵌套,里面那个div使用border-radius属性.若是要求只使用一个属性则可以是如下方法:一个div首先使用了border-radius属性,然后(outline)描边,最后是(box-shadow)阴影.
原理解析:上面有提到过,描边不会跟着圆角走,所以我们需要弄一个阴影来覆盖掉描边产生的内棱角.阴影的大小则是:
网友评论