CSS——⼩三⾓带边框带阴影
乍⼀看，很简单，做⼩三⾓，⾸先想到的是利⽤border的transparent特性，可以制作出⼩三⾓的效果。但是注意，这个⼩三⾓本⾝就是边框制作出来的。怎么能在⼩三⾓的外边再加⼀层⼩边框呢。那就必须再叠加⼀层⼀样的东西，让两者有1px的错位。问题就解决了。不想在页⾯添加多余的⽆意义的标签，还想实现这个效果。⾸先想到的就是⽤元素的伪类来实现。
⾸先想到的是给⼩三⾓加⼀个box-shadow属性，问题就可能很轻松的解决了，可是问题往往没有那么简单。
box-shadow只加在border外边缘，跟我们想要的真的是差太多。仲么办呢？跟上⾯的原理差不太多，只是要⽤到css3中transform，把元素rotate(45deg)，变成两个菱形，然后对底下的元素加box-shadow，然后⽤后⾯的元素覆盖底下的元素。代码如下：
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5<meta charset="UTF-8">
6<meta name="viewport" content="width=device-width, initial-scale=1.0">
7<meta http-equiv="X-UA-Compatible" content="ie=edge">
8<title>⼩三⾓带边框带阴影的div——css实现效果</title>
9<style>
10        .box2 {
11            float: left;
12            position: relative;
13            width: 100px;
14            height: 100px;
15            border: 1px solid red;
16            margin-left: 50px;
17            margin-right: 50px;
18            margin-top: 20px;
19            margin-bottom: 20px;
20            box-sizing: border-box;
21            font-size: 14px;
22            padding: 10px;
23            box-shadow: 0 0 2px rgba(0, 0, 0, .5)
24        }
25
26        .box2:before,
27        .box2:after {
28            position: absolute;
29            content: '';
30            width: 14px;
31            height: 14px;
32            bottom: -8px;
33            left: 50%;
34            margin-left: -7px;
35            overflow: hidden;
36            pointer-events: none;
37            -webkit-transform: rotate(45deg);
38            -mz-transform: rotate(45deg);
39            transform: rotate(45deg);
40        }
41
42        .box2:before {
43            background: red;
44            box-shadow: 1px 1px 2px rgba(0, 0, 0, .5)
45        }
46
47        .box2:after {
48            bottom: -7px;
49            background: #fff;
50        }
51</style>
52</head>
53
box shadow怎么设置
54<body>
55<div class="box2"></div>
56</body>
57
58</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。