本人新手，请问各位大神，如此，该如何编写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>
我的思路：绝对定位+
after/before伪类实现,大致实现的效果如下：TZ可以参见给的demo自行修改一下：在线demo
如果换个思路的话，可以把那个圆的margin设置成背景色，然后盖住右侧，这样看上去就像是凹进去的效果了。
首先更正一下一楼的答案，after/before是伪元素而不是伪类，这个很重要，不能把这个弄混淆了，如果是我我会用一个大圆覆盖长条，再用小圆覆盖大圆就好了