84669 person learning
152542 person learning
20005 person learning
5487 person learning
7821 person learning
359900 person learning
3350 person learning
180660 person learning
48569 person learning
18603 person learning
40936 person learning
1549 person learning
1183 person learning
32909 person learning
本人新手,请问各位大神,如此,该如何编写CSS3 ? (我说的是蓝色的部分) 谢谢了~~
人生最曼妙的风景,竟是内心的淡定与从容!
我的思路:绝对定位+after/before伪类实现,大致实现的效果如下:
after
before
TZ可以参见给的demo自行修改一下:在线demo
如果换个思路的话,可以把那个圆的margin设置成背景色,然后盖住右侧,这样看上去就像是凹进去的效果了。
首先更正一下一楼的答案,after/before是伪元素而不是伪类,这个很重要,不能把这个弄混淆了,如果是我我会用一个大圆覆盖长条,再用小圆覆盖大圆就好了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>css</title> </head> <body> <style> #a { width: 150px; height: 300px; background: radial-gradient(circle at top left, transparent 15px, #e6e4b7 0) top left, radial-gradient(circle at top right, transparent 15px, #e6e4b7 0) top right, radial-gradient(circle at bottom right, transparent 15px, #e6e4b7 0) bottom right, radial-gradient(circle at bottom left, transparent 15px, #e6e4b7 0) bottom left; background-size: 50% 50%; background-repeat: no-repeat; padding: 20px 24px 22px 20px; } #b { display: block; background: radial-gradient(circle at top left, transparent 15px, red 0) top left, radial-gradient(circle at top right, transparent 15px, red 0) top right, radial-gradient(circle at bottom right, transparent 15px, red 0) bottom right, radial-gradient(circle at bottom left, transparent 15px, red 0) bottom left; background-size: 50% 50%; background-repeat: no-repeat; width:100%; height: 100%; padding: 2px; } #b:before { content: ""; width: 100%; height: 100%; display: block; background: radial-gradient(circle at top left, transparent 15px, #e6e4b7 0) top left, radial-gradient(circle at top right, transparent 15px, #e6e4b7 0) top right, radial-gradient(circle at bottom right, transparent 15px, #e6e4b7 0) bottom right, radial-gradient(circle at bottom left, transparent 15px, #e6e4b7 0) bottom left; background-size: 50% 50%; background-repeat: no-repeat; } </style> <p id="a"> <p id="b"></p> </p> </body> </html>
我的思路:绝对定位+
![](http://img.php.cn/upload/image/000/000/000/4ec9cbdfbef3cb6d24937b17fe739b64-0.png)
after
/before
伪类实现,大致实现的效果如下:TZ可以参见给的demo自行修改一下:在线demo
如果换个思路的话,可以把那个圆的margin设置成背景色,然后盖住右侧,这样看上去就像是凹进去的效果了。
首先更正一下一楼的答案,after/before是伪元素而不是伪类,这个很重要,不能把这个弄混淆了,如果是我我会用一个大圆覆盖长条,再用小圆覆盖大圆就好了