用CSS3制作带box-shaodow阴影的三角的对话框
2018-09-02 本文已影响0人
何大必
一个三角带有阴影，用到的知识点transform，box-shaodw
<style>
.triangle {
display: inline-block;
width: 0;
height: 0;
transform: rotate(45deg);
border: 20px solid;
border-color: red transparent transparent #000;
box-shadow: 2px -2px 2px #ccc;
}
</style>
<body>
<div class="triangle"></div>
</body>
效果：
image.png
那么接下来制作一个带阴影的对话框：
<style>
.box {
position: relative;
width: 200px;
height: 200px;
background: #fff;
border: 1px solid #ccc;
box-shadow: 1px 1px 1px 1px #ccc;
}
.box:after {
position: absolute;
top: 20px;
left: 180px;
width: 0;
height: 0;
content: '';
border: 20px solid;
border-color: red red transparent transparent;
transform: rotate(45deg);
box-shadow: 2px -2px 2px #ccc;
}
</style>
<body>
<div class="box"></div>
</body>
效果
image.png
最后来说说box-shadow：
语法：
box-shadow:none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]
解析：
inset
默认阴影在边框外outset。
使用 inset 后，阴影在边框内（即使是透明边框），背景之上内容之下。
<offset-x> <offset-y> 必须
这是头两个 <length> 值，用来设置阴影偏移量。<offset-x> 设置水平偏移量，如果是负值则阴影位于元素左边。 <offset-y> 设置垂直偏移量，如果是负值则阴影位于元素上面。
如果两者都是0，那么阴影位于元素后面。这时如果设置了<blur-radius> 或<spread-radius> 则有模糊效果。
box-shadow: 0 0 4px #ccc;的效果：
image.png
<blur-radius>必须
这是第三个 <length> 值。值越大，模糊面积越大，阴影就越大越淡。 不能为负值。默认为0，此时阴影边缘锐利。
<spread-radius>
这是第四个 <length>值。取正值时，阴影扩大；取负值时，阴影收缩。默认为0，此时阴影与元素同样大。
<color>
如果没有指定，则由浏览器决定——通常是color的值，不过目前Safari取透明。
好吧，择日不如撞日，再来说说transform
传送门
