0
A
回答
2
你可以做到这一点使用单div
与:after
和:before
:伪元素和radial-gradient
秒。
div {
position: relative;
width: 400px;
height: 400px;
background: -webkit-radial-gradient(top left, #ECECEC 3%, transparent 3%), -webkit-radial-gradient(bottom left, #ECECEC 3%, transparent 3%), -webkit-radial-gradient(top right, #ECECEC 3%, transparent 3%), -webkit-radial-gradient(bottom right, #ECECEC 3%, transparent 3%);
background: -moz-radial-gradient(top left, #ECECEC 3%, transparent 3%), -moz-radial-gradient(bottom left, #ECECEC 3%, transparent 3%), -moz-radial-gradient(top right, #ECECEC 3%, transparent 3%), -moz-radial-gradient(bottom right, #ECECEC 3%, transparent 3%);
background: radial-gradient(top left, #ECECEC 3%, transparent 3%), radial-gradient(bottom left, #ECECEC 3%, transparent 3%), radial-gradient(top right, #ECECEC 3%, transparent 3%), radial-gradient(bottom right, #ECECEC 3%, transparent 3%);
margin: 0 auto;
border: 40px solid #ECECEC;
z-index: -1;
padding: 30px;
}
div:after {
position: absolute;
content: '';
width: 103%;
height: 103%;
left: -1.5%;
top: -1.5%;
background: -webkit-radial-gradient(top left, white 3%, transparent 3%), -webkit-radial-gradient(bottom left, white 3%, transparent 3%), -webkit-radial-gradient(top right, white 3%, transparent 3%), -webkit-radial-gradient(bottom right, white 3%, transparent 3%);
background: -moz-radial-gradient(top left, white 3%, transparent 3%), -moz-radial-gradient(bottom left, white 3%, transparent 3%), -moz-radial-gradient(top right, white 3%, transparent 3%), -moz-radial-gradient(bottom right, white 3%, transparent 3%);
background: radial-gradient(top left, white 3%, transparent 3%), radial-gradient(bottom left, white 3%, transparent 3%), radial-gradient(top right, white 3%, transparent 3%), radial-gradient(bottom right, white 3%, transparent 3%);
border: 3px solid white;
box-sizing: border-box;
z-index: 0;
}
div:before {
position: absolute;
content: '';
width: 106%;
height: 106%;
left: -3%;
top: -3%;
background: -webkit-radial-gradient(top left, #ECECEC 4%, transparent 4%), -webkit-radial-gradient(bottom left, #ECECEC 4%, transparent 4%), -webkit-radial-gradient(top right, #ECECEC 4%, transparent 4%), -moz-radial-gradient(bottom right, #ECECEC 4%, transparent 4%);
background: -moz-radial-gradient(top left, #ECECEC 4%, transparent 4%), -moz-radial-gradient(bottom left, #ECECEC 4%, transparent 4%), -moz-radial-gradient(top right, #ECECEC 4%, transparent 4%), -moz-radial-gradient(bottom right, #ECECEC 4%, transparent 4%);
background: radial-gradient(top left, #ECECEC 4%, transparent 4%), radial-gradient(bottom left, #ECECEC 4%, transparent 4%), radial-gradient(top right, #ECECEC 4%, transparent 4%), radial-gradient(bottom right, #ECECEC 4%, transparent 4%);
z-index: 1;
}
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br />
<br />Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt
ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit
esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div>
+0
谢谢!但它不能作为响应 - 当改变宽度时。 –
+0
@AtiarRahman - '径向渐变'取决于'div'的'width'和'height'。所有“宽度”都不能有相同的边框尺寸。 [CodePen Demo](http://codepen.io/chipChocolate/pen/KwNzoJ) –
相关问题
- 1. 如何创建这个边框的WinForms
- 2. 如何创建两个边框
- 3. 如何用swing创建一个简单的两个边框?
- 4. 如何在整个图层列表周围创建边框?
- 5. 用两个截止角创建边框
- 6. 我如何创建两个标签的倾斜中间边框
- 7. 如何创建一个创建不连续边框的xml drawable?
- 8. 如何在视图的一个边上创建边框?
- 9. 如何在Java中创建这样的边框?
- 10. 如何创建这个multiindex数据框
- 11. wxPython:如何创建一个平面外观(无边框边框)的复选框。
- 12. 如何在图像周围创建两个边框或框阴影?
- 13. 如何创建淡出的边框
- 14. 如何在gnuplot中创建一个带边框的框架?
- 15. 如何倒转添加边框半径?
- 16. 如何创建一个边框,将轮廓div减去边距
- 17. 如何用两种不同颜色创建边框底部?
- 18. 倒圆形的边框css
- 19. 创建一个相框边框类型
- 20. 在两个边框之间创建平滑的角度线
- 21. 创建只有底部边框swift的两个文本字段
- 22. 在两个div之间创建可调整大小的边框
- 23. 如何仅在部分边缘创建边框,或者如何模拟边框?
- 24. 如何在Android中的两个或更多视图周围创建边框?
- 25. 如何用边框创建形状?
- 26. 如何为图像创建边框?
- 27. 如何创建网格边框?
- 28. d3 - 如何创建多色边框
- 29. 我如何创建凹形边框?
- 30. 如何围绕LongListSelector SelectedItem创建边框
那你尝试解决这个问题? – Zim84
相关:http://stackoverflow.com/questions/4012085/is-there-any-way-to-invert-a-rounded-corner-in-css –
请不要问完全相同的问题两次。 –