1.半透明边框
<style>
.box{
padding: 20px;
background: yellow;
}
.co{
width: 200px;
height: 100px;
border: 10px solid hsla(0,0%,100%,.5);
background: white;
background-clip: padding-box;
}
</style>
</head>
<body>
<div class="box">
<div class="co"></div>
</div>
2.带边框的按钮写法
<style>
.box{
position: absolute;
margin: auto;
top:0;
left:0;
right:0;
bottom:0;
border-radius: 20px;
width: 200px;
height: 100px;
background: red;
box-shadow: 0 0 0 10px #fff,0 0 0 15px red;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
微信图片_20190227111954.png
3.织补效果
<style>
.box{
position: absolute;
margin: auto;
top:0;
left:0;
right:0;
bottom:0;
border-radius: 5px;
width: 200px;
height: 100px;
background: #655;
outline: 2px dashed #fff;
outline-offset: -15px;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
微信图片_20190227112334.png
4.内部圆角
<style>
.box{
position: absolute;
margin: auto;
top:0;
left:0;
right:0;
bottom:0;
border-radius: 5px;
width: 200px;
height: 100px;
background: tan;
border-radius: .8em;
padding: 1em;
box-shadow: 0 0 0 .5em #655;
outline: .6em solid #655;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
微信截图_20190227115736.png
网友评论