CSS3 border凹陷该如何编写？
问题描述
本人新手，请问各位大神，如此，该如何编写CSS3 ？ （我说的是蓝色的部分） 谢谢了~~
问题解答
回答1：我的思路：绝对定位+after/before伪类实现,大致实现的效果如下：
TZ可以参见给的demo自行修改一下：在线demo
回答2：如果换个思路的话，可以把那个圆的margin设置成背景色，然后盖住右侧，这样看上去就像是凹进去的效果了。
回答3：首先更正一下一楼的答案，after/before是伪元素而不是伪类，这个很重要，不能把这个弄混淆了，如果是我我会用一个大圆覆盖长条，再用小圆覆盖大圆就好了
回答4：<!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>
相关文章：
1. css3 - 请问一下在移动端CSS布局布局中通常需要用到哪些元素，属性？2. 网页爬虫 - python requests爬虫，如何post payload3. node.js - 微信的自动回复问题4. PHP能实现百度网盘的自动化么？5. android - 使用vue.js进行原生开发如何进行Class绑定6. javascript - 百度图片切换图片时url会改变，但无刷新，没用hash，IE8也支持，请问是用了什么技术？7. MySQL 水平拆分之后，自动增长的ID有什么好的解决办法？8. angular.js - 各位大神们，你们混合开发，web方式中更推荐用什么框架呀？ react？vue？angular？谢谢～9. 我正在使用jsp / jstl / spring动态生成css和js。如何将此结果放置在头部的链接标签中。不在头部的脚本标签中10. mysql如何添加索引的时候指定索引方式
网公网安备