写作背景：

　　觅兼职--登陆页面，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. WithEvents的一些用法

    WithEvents的一些用法说明:1.WithEvents是指定一个或多个已声明成员变量引用可引发事件的类的实例.2.当某个变量是使用 WithEvents 定义时,可以用声明方式指定某个方法使用 ...

  2. JS让函数只调用一次

    1 .  在第一次调用函数时,就将该函数内容腾空,以到达函数仅调用一次 ———————————————————————————————— 2 . 设置布尔值来控制后面的函数调用 window.onlo ...

  3. “HTTP 错误 404.15 - Not Found 请求筛选模块被配置为拒绝包含的查询字符串过长的请求”之解决办法

    今天同事在做通过接口访问数据时,由于提交的一个参数内容比较多,导致测试时报了以下错误. 同时页面又给出了以下提示: 所以最终根据在网上找了相关资料总结出一下解决办法. 1. 在Web.config配置 ...

  4. java实现一个简单的计数器

    package com.fengunion.sf; import org.junit.platform.commons.util.StringUtils; import java.util.HashM ...

  5. Python 序列化 pickle/cPickle模块

    Python 序列化 pickle/cPickle模块 2013-10-17 Posted by yeho Python序列化的概念很简单.内存里面有一个数据结构,你希望将它保存下来,重用,或者发送给 ...

  6. 模拟输入(ADC-A0)

    ESP8266具有内置的10位ADC,只有一个ADC通道(A0引脚),即只有一个ADC输入引脚可读取来自外部器件的模拟电压 ESP8266上的ADC通道和芯片供电电压复用,也就是说我们可以将其设置为测 ...

  7. 【leetcode】698. Partition to K Equal Sum Subsets

    题目如下: 解题思路:本题是[leetcode]473. Matchsticks to Square的姊妹篇,唯一的区别是[leetcode]473. Matchsticks to Square指定了 ...

  8. python之GUI编程-tkinter学习

    推荐几个学习网址:https://www.cnblogs.com/shwee/p/9427975.html https://cloud.tencent.com/developer/section/13 ...

  9. 尝试用了一哈wepy框架的感想

    恶心死我, 1 在项目里出现了中文乱码(utf-8在wpy文件里有中文和注释--编译后就转化成乱码, 把代码拷在另外的项目里,(该项目没有中文乱码现象,)编译出来就出现中文乱码, 然后我再在所拷的代码 ...

  10. Linux GDB 程序调试工具使用详解

    转自    http://www.codeceo.com/article/linux-gdb-tools.html 整理的挺全的 GDB概述 GDB是GNU开源组织发布的一个强大的UNIX下的程序调试 ...