写作背景：

　　觅兼职--登陆页面，UI给的原型图很漂亮，其中有一个图要求div外面有一圈透明度为0.37且带有渐变的边框。效果图如下：

　　在写的时候遇到了一点小小的问题：无法给同一个div设置圆角的透明+渐变边框。但是，又不能不做是不是，费了一番心思查资料，下面是解决方案：

　　1、分成两个div叠加的形式

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<style>

    .one {

        width: 300px;

        height: 300px;

        border-radius: 6px;

        background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 5%, rgba(255, 255, 255, 0.4) 10%, rgba(167, 166, 166, 0.6) 90%, rgba(150, 148, 148, 0.8) 95%, rgb(175, 173, 173) 100%);

        margin: 0 auto;

        padding: 50px;

    }

    .two {

        width: 280px;

        height: 280px;

        background-color: rgb(158, 106, 106);

        border-radius: 6px;

    }

</style>

<body>

    <div class="one">

        <div class="two"></div>

    </div>

</body>

</html>

效果图：

css：设置div边框透明+渐变的更多相关文章

  1. CSS设置DIV边框为圆角，添加背景色溢出的问题

    这么几天需要做一个类似于层级展示的东西,最后一层需要做一些div框来展示数据,我用css设置了div的边框为圆角,但是添加背景色的时候颜色溢出,覆盖了四个角的圆弧,效果如图所示: css代码如下: . ...

  2. css美化Div边框的样式实例*（转载）

    css美化Div边框的样式实例   很多时候如果不是用了很多样式,很难把边框修饰得好看,看了一篇博文,觉得真的挺漂亮,也挺好看. 转载的博文地址 将这段美化的css代码 border:1px soli ...

  3. 设置div背景透明的CSS样式

    div背景透明样式: 样式代码: .alert{filter:alpha(opacity=100); /* IE */ -moz-opacity:1.0; /* Moz + FF */ opacity ...

  4. css设置兼容的透明样式

    css设置透明并实现兼容: <style>div{ filter: alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8; o ...

  5. CSS让div背景透明

    div背景透明样式: 样式代码: .alert{filter:alpha(opacity=100); /* IE */ -moz-opacity:1.0; /* Moz + FF */ opacity ...

  6. 设置div背景透明的两种方法

    实现div背景透明的两种方法 1.使用opacity属性 background-color:#000; opacity: 0.5; 这样做可以设置div内部所以区域的透明度,但是也会影响里面的文字,效 ...

  7. 【转】CSS设置DIV背景色渐变显示

     [原链接]http://www.2cto.com/kf/201310/248187.html <style type="text/css">     .linear{ ...

  8. CSS设置DIV背景色渐变显示

    本文转载自:http://blog.csdn.net/gingerredjade/article/details/12191741 <style type="text/css" ...

  9. CSS设置DIV背景色渐变

    div{ width: 200px; height: 200px; FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=, ...

随机推荐

  1. Python列表（list）的方法调用

    #list# n = [12,34,"yue"]# v = n.append(27) #增加元素,注意是在尾部增加,由于列表是可修改的,所以是在原列表中增加,与字符串存在区别# p ...

  2. Codeforces Round #427 (Div. 2) - B

    题目链接:http://codeforces.com/contest/835/problem/B 题意:给定一个数k和一个数字串n.问你最少改几个数字才能满足所有数字的和不小于k. 思路:考虑贪心,每 ...

  3. 复试笔试复习 & bd面试总结

    计算机网络: 1.OSI模型中提供端到端服务的是传输层 2.波特率的含义是每秒钟信号变化的次数 3.非屏蔽双绞线中5类网线的数据速率为100Mbps,连接器是RJ-45 4.虚电路在数据链路层实现,电 ...

  4. EffectiveC++01-03

    导读 作者Scott Meyers在如何有效运用C++方面给出了55个具体的做法,大致分为两类: 一般性的设计策略,集中于"如何在不同的做法中选择一种完成任务" 选择inherit ...

  5. 【学习】016 MySQL数据库优化

    MySQL如何优化 表的设计合理化(符合3NF) 添加适当索引(index) [四种: 普通索引.主键索引.唯一索引unique.全文索引] SQL语句优化 分表技术(水平分割.垂直分割) 读写[写: ...

  6. 'No application found. Either work inside a view function or push'

    问题: 说是create_all()的地方有问题,莫名其妙. 后来经过查资料,找出解决方法.附上代码如下:

  7. Springboot配置文件占位符

    一.配置文件占位符 1.application.properties server.port=8088 debug=false product.id=ID:${random.uuid} product ...

  8. [CF852D] Exploration plan

    问题描述 The competitors of Bubble Cup X gathered after the competition and discussed what is the best w ...

  9. Win10离线安装.NET Framework 3.5的方法补充（附cab格式离线安装包下载） - 转载

    MS酋长很早以前已经分享了<Win10离线安装.NET Framework 3.5的方法技巧>,同时分享了exe格式的.NET Framework 3.5离线安装包下载地址.但有部分网友反 ...

  10. 微信小程序-坑1-await-async

    VM45:1 thirdScriptError sdk uncaught third Error regeneratorRuntime is not defined ReferenceError: r ...