1
A
回答
3
你可以看一下渐变,背景夹和背景大小:
示例可能http://codepen.io/gc-nomade/pen/aZbrEQ
div {
margin: 1em auto;
width: 600px;
max-width: 70%;
padding: 40px;
/* set offset here for border corners */
background: linear-gradient(white, white) top left no-repeat, linear-gradient(white, white) top left no-repeat, linear-gradient(white, white) top right no-repeat, linear-gradient(white, white) top right no-repeat, linear-gradient(white, white) bottom left no-repeat, linear-gradient(white, white) bottom left no-repeat, linear-gradient(white, white) bottom right no-repeat, linear-gradient(white, white) bottom right no-repeat, rgba(255, 255, 255, 0.15);
/* color receive
background-clip:content-box;
so it is not drawn on padding areas */
background-clip: border-box, border-box, border-box, border-box, border-box, border-box, border-box, border-box, content-box;
background-size: 2px 60px, 80px 2px;
/* here give length and thickness of border corners */
color: white;
}
p,
h2 {
padding: 1em;
margin:0;
}
html {
height: 100%;
background: url(http://lorempixel.com/640/480/nature/6);
background-size: cover
}
body {
min-height: 100%;
background: rgba(0, 0, 0, 0.5);
margin: 0;
padding: 4em;
}
<div>
<h2>title</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus
lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor,
facilisis luctus, metus</p>
</div>
1
只是为了证明你的问题是多么简单。 ::before
和::after
隐藏边框的部分。 z-index
的叠加。
.dirt {
position: relative;
width: 200px;
height: 100px;
line-height: 100px;
text-align: center;
background-color: rgba(251, 145, 156, 1);
border: 2px solid rgba(231, 0, 0, 1);
box-sizing: border-box;
}
.dirt > span {
position: relative;
z-index: 15;
background-color: rgba(255,255,255,0.5);
padding: 25px;
}
.dirt::after,
.dirt::before {
content: '';
position: absolute;
background-color: rgba(251, 145, 156, 1);
/*same color*/
}
.dirt::before {
top: 20%;
bottom: 20%;
left: -2px;
/*border-width*/
right: -2px;
/*border-width*/
}
.dirt::after {
top: -2px;
/*border-width*/
bottom: -2px;
/*border-width*/
left: 20%;
right: 20%;
}
<p>An example: (do not use)</p>
<div class="dirt">
<span>My little dirt text</span>
</div>
相关问题
- 1. 概述:无VS概述:0
- 2. Dox(haxe文档工具)包概述
- 3. DLR的概述?
- 4. SSMS - MiniMap概述
- 5. CakePHP的概述
- 6. Sitecollection概述Page
- 7. 可可tableview概述
- 8. Python语言概述
- 9. iOS内核概述!
- 10. SIP标头概述
- 11. 静态类概述
- 12. SQL - 概述查询
- 13. WPF控件概述
- 14. UILabel文本概述
- 15. HTML概述,帮我
- 16. 具体的CSS值
- 17. 概述系统窗口
- 18. 图像操作概述
- 19. .NET大会参考概述
- 20. Grails项目结构概述
- 21. 作业概述说明
- 22. 最佳GAC教程/概述?
- 23. 概述sublimetext的功能3
- 24. Java库和框架概述
- 25. 删除概述ContentDialog箱
- 26. Alternativa3D - 概述3D对象
- 27. ASP.NET MVC 2.0概述信息?
- 28. General PhoneGap概述信息
- 29. android.R.layout做什么?概述
- 30. Xtext自定义概述
轮廓或边界? –
之前和之后或bg图像PNG – vicodin