CSS

CSS3基础知识:box-shadow, outline 实现边框内圆角

特别声明:如果您喜欢小站的内容,可以点击 终身VIP¥188.00元 包年VIP¥88.00元 包季VIP¥28.00 包月VIP¥10.00元 进行全站阅读。 如果您对付费阅读有任何建议或想法,欢迎发送邮件至: 864479410@qq.com,或添加QQ:864479410(^_^)

知识点分析

我们都知道box-shadow是会紧贴border-radius圆角边的,但是,描边outline并不会与圆角边border-radius贴合,我们可以将两者组合,通过box-shadow去填补描边outline所产生的间隙来达到边框内圆角的效果。

示例代码

<main>
  <input id="ck" type="checkbox" checked/>
  <label for="ck">box-shadow</label>
  <div>
    <p>楼上萦帘弱絮,墙头碍月低花。年年春事关心事,肠断欲栖鸦。</p>
    <p>舞镜鸾衾翠减,啼珠凤蜡红斜。重门不锁相思梦,随意绕天涯。</p>
  </div>
</main>
main{
  width: 100%;
  padding: 60px 80px 80px;
}
div{
  width: 209px;
  margin: 29px auto;
  padding: 8px 16px;
  border-radius: 8px;
  background: #FCE4EC;
  outline: 6px solid #F06292;
}
input{
  margin-left: calc(50% - 45px);
}
input:checked ~ div{
  box-shadow: 0 0 0 5px #F06292;
}

浏览器兼容

(3)

本文由 Web秀 作者:Javan 发表,转载请注明来源!

热评文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注