写作背景：

　　觅兼职--登陆页面，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. Flask【第3篇】：蓝图、基于DBUtils实现数据库连接池、上下文管理等

    基于DBUtils实现数据库连接池 小知识: 1.子类继承父类的三种方式 class Dog(Animal): #子类 派生类 def __init__(self,name,breed, life_v ...

  2. 【LuoguP4156】论战捆竹竿

    题目链接 题意简述 你有一个长度为 n 的字符串 , 将它复制任意次 , 复制出的串的前缀可以与之前的串的后缀重叠在一起 , 问最后总共可能的长度数目 , 长度不能超过 \(w\) 多组数据. \(n ...

  3. LeetCode--072--编辑距离(python)

    给定两个单词 word1 和 word2,计算出将 word1 转换成 word2 所使用的最少操作数 . 你可以对一个单词进行如下三种操作: 插入一个字符删除一个字符替换一个字符示例 1: 输入: ...

  4. table的td设置1px的方法，亲测有效

    第一种方法: 1.将table的属性设置为:BORDER=0 .cellspacing=1 : 2.设置table的背景色为即你要设置的table的边框颜色: 3.设置所有td背景色为#ffffff白 ...

  5. css语法以及css选择器

    CSS语法 CSS的标准语法主要由两方面构成一是 选择器.二是 声明框. 一.选择器      通过选择器可以选定页面指定的元素,并将声明块中的样式应用在选择器选中的元素中去. 二.声明框       ...

  6. 使用穷举法结合numpy解决八皇后问题

    一般说到八皇后问题,最先想到的就是回溯思想,而回溯思想往往是需要递归来实现的. 计算机很善长做重复的事情,所以递归正和它的胃口,而我们人脑更喜观平铺直叙的思维方式.当 我们看到递归时,总想把递归平铺展 ...

  7. Linux内核设计与实现 总结笔记（第九章）内核同步介绍

    在使用共享内存的应用程序中,程序员必须特别留意保护共享资源,防止共享资源并发访问. 一.临界区和竞争条件 1.1 临界区和竞争条件 所谓临界区就是访问和操作共享数据代码段.多个执行线程并发访问同一个资 ...

  8. CF 696 A Lorenzo Von Matterhorn（二叉树，map）

    原题链接:http://codeforces.com/contest/696/problem/A 原题描述: Lorenzo Von Matterhorn   Barney lives in NYC. ...

  9. android发送udp，tcp消息

    发送方创建步骤: 1.  创建一个DatagramSocket对象 DatagramSocket socket = new  DatagramSocket (4567); 2.  创建一个 InetA ...

  10. 基于python实现自动化办公学习笔记三

    Excel(1)写xls文件 # 有序字典from collections import OrderedDict# 存储数据from pyexcel_xls import save_data def ...