我想实现边框顶部和底部像下面的图像如何实现与CSS技巧?
挑战是我不希望整个宽度与边框,它也应该响应.
手机版本是http://i.imgur.com/XZTW28N.jpg,它也应该在桌面和移动浏览器中工作.
我尝试使用%width边框,但它不工作.
我写下面的代码,但它不是100%完美的答案.
HTML:
- <h1>How it Works</h1
CSS:
- h1:before,h1:after {
- content: "";
- height: 1px;
- background: linear-gradient(to right,rgba(0,0) 0%,rgba(147,147,1) 50%,0) 100%);
- display: block;
- margin-bottom: 10px;
- margin-top: 10px;
- }
解决方法
我在你的CSS中做了一些修改:
- h1{
- text-align: center;
- font-size: 70px;
- }
- h1:before,h1:after{
- position: relative;
- content: "";
- width: 30%;
- left: 35%;
- display: block;
- margin-bottom: 10px;
- margin-top: 10px;
- border-bottom: 5px dotted yellow;
- }
编辑:
如果你想要一个固定的宽度你可以添加:
- h1:before,h1:after{
- width: 150px; /* You can change this value */
- left: 50%;
- transform: translateX(-50%);
- }