写作背景：

　　觅兼职--登陆页面，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. diff 比较两个文件的不同

    1.命令功能 diff 逐行比较文件内容,并输出文件差异. 2.语法格式 diff  option   file1    file2 diff  选项   文件1   文件2 参数说明 参数 参数说明 ...

  2. 长沙理工大学第十二届ACM大赛-重现赛 B 日历中的数字 (实现)

    链接:https://ac.nowcoder.com/acm/contest/1/B来源:牛客网 全屏查看题目   时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 131072K,其他 ...

  3. 一文了解kudu【转载】

    原文地址:https://www.jianshu.com/p/83290cd817ac

  4. Attention Points

    Attention Points 数组范围 无向图.树,边表的范围是边数的两倍. 因为最近树的题目做的比较多,一定要注意分清是树还是图,不能冲上去就去开struct Edge{int to,ne,w; ...

  5. bzoj3510 首都 LCT 维护子树信息+树的重心

    题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=3510 题解 首先每一个连通块的首都根据定义,显然就是直径. 然后考虑直径的几个性质: 定义:删 ...

  6. 字符编码 python2与python3的区别

    目录 1. 字符编码 2. 文本编辑器存储信息的过程 3. 编码: 1. 编码的历史 2. gb2312和gbk的区别 3. 编码和解码 4. python解释器 解释代码的流程 1. 读取文本到解释 ...

  7. Ansible环境搭建

    Installation Guide(Ansible官网链接) Basics / What Will Be Installed What Version To Pick? Control Machin ...

  8. 【leetcode】1106. Parsing A Boolean Expression

    题目如下: Return the result of evaluating a given boolean expression, represented as a string. An expres ...

  9. LeetCode--059--螺旋矩阵 II（python）

    效率超级低,但是能过.... class Solution: def generateMatrix(self, n): tR = tC = 0 dR = n-1 dC = n-1 x = [[0 fo ...

  10. 6389. 【NOIP2019模拟2019.10.26】小w学图论

    题目描述 题解 之前做过一次 假设图建好了,设g[i]表示i->j(i<j)的个数 那么ans=∏(n-g[i]),因为连出去的必定会构成一个完全图,颜色互不相同 从n~1染色,点i的方案 ...