CSS揭秘 (2)- 半透明/多重边框、背景定位、边框内圆角

原创 乘风逐月 随笔 CSS知识记录 198阅读 2018-08-07 12:00:08 举报
一、半透明边框

问题:如何给一个容器设置一层白色背景和半透明白色边框?

知识点:background-clip,background-clip属性的值有:

描述
border-box默认值,背景被剪裁到边框盒
padding-box背景被剪裁到内边距
content-box背景被剪裁到内容框

示例:

二、多重边框

问题:如何给一个容器设置多重边框?

方法一:使用box-shadow

知识点:box-shadow,语法 box-shadow:x-shadow y-shadow blur spread color inset。使用逗号分隔可以创建任意数量的边框。
注意:
a.box-shadow 是层层叠加的,第一层投影在最顶层,后续投影半径要叠加。
b.投影和边框不完全一致,不会影响布局,也不会受到box-sizing属性影响,需要通过外边距或内边来模拟投影边框所需要的空间。
c.投影边框出现在元素外围,不会响应鼠标事件,可以设置成内阴影,这时需要增加额外的内边距留出足够的空隙。
示例:

方法二:使用outline

使用 outline 的好处是:
a. 可以设置虚线框
b. 可以使用 outline-offset 属性来控制它与元素边缘之间的间距
注意:
a.outline 只支持双边框场景
b. outline 不会贴合元素 border-radius 属性产生的圆角
示例:

三、灵活的背景定位

问题:如何把背景图定位到距离底边 10px和右边 20px的位置?

方法一:使用 background-position 的扩展语法

知识点:background-position 的扩展语法允许指定背景图片距离任意角的偏移量,只需要在偏移量前面指定关键字。
方法二:使用 calc()

知识点:这里是以左上角为参考点来实现偏移的

四、边框内圆角

问题:如何实现一个容器内侧有圆角,而边框是直角?

方法-:使用两个元素

方法二: 使用一个元素

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复