【CSS揭秘】案例1、半透明边框

先附上代码:
HTML代码:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1、半透明边框title>
    <link rel="stylesheet" href="1.css"/>
head>
<body>
<div id="div1">111div>
body>
html>

CSS代码:

@charset "UTF-8";
#div1{
    width: 300px;
    height:300px;
    border: 10px solid hsla(0,0%,100%,0.5);
    background: white;
    background-clip: padding-box;
}
body{
    background: #000;
}

效果图:
【CSS揭秘】案例1、半透明边框_第1张图片
可以看到,div的边框是透明的


HSLA颜色

说明
HSLA(H,S,L,A)
取值
**H:** Hue(色调)。0(或360)表示红色,120表示绿色,240表示蓝色,也可取其他数值来指定颜色。取值为:0 - 360 **S:** Saturation(饱和度)。取值为:0.0% - 100.0% **L:** Lightness(亮度)。取值为:0.0% - 100.0% **A:** Alpha透明度。取值0~1之间
更多用法参考
http://www.css88.com/book/css/values/color/hsla.htm ———- 通常,在给一个元素加透明边框的时候,我们首先想到的是应该这么做: (给一个红色的方框加上透明边框)
border: 10px solid hsla(0,0%,100%,0.5);
background: red;

但是效果是这样的:

【CSS揭秘】案例1、半透明边框_第2张图片

可以看到,透明的边框并不是相对于黑色的背景透明的,而是相对于红色的方框。
如果我们把边框设置成虚线来显示,就能更加直观的看到这个效果:

【CSS揭秘】案例1、半透明边框_第3张图片

默认状态下,背景会延伸到边框的区域下层。
所以如果我们能将红色的背景裁剪到边框之内,就可以解决这个问题。


background-clip

定义和用法
background-clip 属性规定背景的绘制区域。
取值
描述
border-box 背景被裁剪到边框盒。
padding-box 背景被裁剪到内边距框。
content-box 背景被裁剪到内容框。
更多用法参考

http://www.w3school.com.cn/cssref/pr_background-clip.asp


所以当我们给代码加上background-clip: padding-box;后,就可以把效果完美的显示出来了。

你可能感兴趣的:(读书笔记-前端-《CSS揭秘》)