css选择器before和after实战
1. 效果图：
2. 源码：
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8" /> 6 <title>css-glasses</title> 7 <link rel="stylesheet" type="text/css" href="style.css" /> 8 </head> 9 10 <body> 11 <div class="glasses"></div> 12 </body> 13 14 </html>
1 @charset "utf-8"; 2 *{ padding: 0; margin: 0; } 3 4 .glasses { 5 margin: 250px auto; 6 border-top-right-radius: 50% 100%; 7 border-top-left-radius: 50% 100%; 8 border-bottom-left-radius: 0px; 9 border-bottom-right-radius: 0px; 10 font-size: 150px; 11 position: relative; 12 height: 0.1em; 13 width: 0.4em; 14 border-top: 0.05em solid #2C2C2C; 15 box-shadow: -0.2em -0.3em 0 -0.07em #2C2C2C,0em -0.3em 0 -0.07em #2C2C2C,0.2em -0.3em 0 -0.07em #2C2C2C; 16 } 17 .glasses:before { 18 box-shadow: 0.55em 0 0 -0.47em #2C2C2C; 19 position: absolute; 20 content: ""; 21 border-top-left-radius: 100% 75%; 22 border-top-right-radius: 142% 100%; 23 border-bottom-right-radius: 91% 197%; 24 border-bottom-left-radius: 200% 200%; 25 height: 1em; 26 width: 1.1em; 27 background: #2C2C2C; 28 left: 0.37em; 29 top: -0.4em; 30 } 31 .glasses:after { 32 box-shadow: -0.55em 0 0 -0.47em #2C2C2C; 33 position: absolute; 34 content: ""; 35 border-top-right-radius: 100% 75%; 36 border-top-left-radius: 142% 100%; 37 border-bottom-left-radius: 91% 197%; 38 border-bottom-right-radius: 200% 200%; 39 height: 1em; 40 width: 1.1em; 41 background: #2C2C2C; 42 left: -1.06em; 43 top: -0.4em; 44 }
3. 思路：
3.1 把眼镜分为三部分, 分别为中间的两条杠, 右边的镜片, 左边的镜片.
3.2 以中间的杠为中心, 选择器before表示右边的镜片和外面的杠, 选择器after表示左边的镜片和外面的杠
