问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

对于边框追加样式，不知道有什么好的处理方式？

头像
fengjutian
    50520124164

    image.png
    像上面的线条。不知道有没有好的处理方式？这个区域是透明的

    前端csscss3vue.js
    阅读 2.7k
    4 个回答
    得票最新
    头像
    Fractal
      5.5k22433

      <html>
<head>
  <style type="text/css">
  body {background-color:#000;}
  .box {position:relative;width:200px;height:150px;background-color:rgba(0,0,0,0.5);}
  .box:after {
      content:'\200B';
      position:absolute;
      top:0;bottom:0;left:0;right:0;
      background: linear-gradient(-45deg, #FFF 0%, transparent 50%, #FFF 100%) top left no-repeat;
      -webkit-mask-image:linear-gradient(to bottom,#000 0,transparent 1px ,transparent calc(100% - 1px), #000 150px),linear-gradient(to right,#000 0,transparent 1px ,transparent calc(100% - 1px), #000 200px);
      pointer-event:none;
  }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>
      头像
      liubingyang
        3.4k22055

        如果渐变有图片可以使用border-image试试。
        笨一点儿的办法就是写4条div用linear-gradient渐变实现。

        头像
        嘿嘿不务正业
          26514
          头像
          wemk
            9821218

            加个外边框样式包裹，底色用渐变调整。右下角的透明度可用rgba的第四个参数透明度实现；

            /*外边框*/
.out-box{
    display: inline-block;
    padding: 1px;
    background-image: linear-gradient(135deg,#aaa 0%,#000 30%,#000 60%,rgba(255,255,255,.3) 100%);
}
/*正文盒子*/
.content{
    background-color: #000;
    width: 200px;
    height: 100px;
}
            <div class="out-box">
    <div class="content"></div>
</div>

            最终效果

            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题