写作背景：

　　觅兼职--登陆页面，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. CRMEasy知识库点击无法弹出窗体问题

    丢失控件   MSDATLST.OCX 将此控件放在路径下    C:\Windows\System32 并进行注册,具体方法为: 打开控件方式选择   C:\Windows\System32\reg ...

  2. Granger Causality 格兰杰因果关系

      (Granger Causality) 格兰杰(Granger)于 1969 年提出了一种基于“预测”的因果关系(格兰杰因果关系),后经西蒙斯(1972 ,1980)的发展,格兰杰因果检验作为一种 ...

  3. python 写matlab中的加性高斯白噪声AWGN

    定义 原始信号:x 噪声信号:n 信噪比:SNR 信号长度:N def wgn(x, snr): snr = 10**(snr/10.0) xpower = np.sum(x**2)/len(x) n ...

  4. Codeforces 931 概率DP

    A #include <bits/stdc++.h> #define PI acos(-1.0) #define mem(a,b) memset((a),b,sizeof(a)) #def ...

  5. permutation 1

    permutation 1 #include<bits/stdc++.h> using namespace std; ]; void init() { ; i<=; i++)A[i] ...

  6. linux 搭建环境

    报错:cannot find valid baseurl for repo:base 解决办法: https://blog.csdn.net/banqgg/article/details/782560 ...

  7. 关于VMware 15搭建MacOS 10.14后无法播放在线视频和客户端视频的问题

    最近在自己的电脑上搭建了MacOS10.14系统,搭建是成功了,但是发现一个很坑的事,看视频发现黑屏.就是那种只有声音,没有视频的问题,在多个浏览器上和客户端都是一样的.百度了下,总结有2种可能,一是 ...

  8. C++中一些容易迷惑的语法点总结

    #include<iostream> #include<cstring> using namespace std; int main(){ ][]={{,,},{,,}}; ] ...

  9. scipy几乎实现numpy的所有函数

    NumPy和SciPy的关系?   numpy提供了数组对象,面向的任何使用者.scipy在numpy的基础上,面向科学家和工程师,提供了更为精准和广泛的函数.scipy几乎实现numpy的所有函数, ...

  10. react-native modal

    1.属性 animationType(动画类型) PropTypes.oneOf([‘none’, ‘slide’, ‘fade’]) none:没有动画 slide:从底部滑入 fade:淡入视野 ...