如何用CSS设置DIV边框透明

如何实现用CSS设置DIV边框为透明呢?我们来看一看。

操作方法

  • 01

    透明一般认为是一种颜色属性,但是并没有这个数值。我们找到了一种让div实现透明的最佳方案,运用RGBA

  • 02

    RGBA在RGB的基础上多了控制alpha透明度的参数。R(红)、G(绿)、B(蓝)三个参数,正整数值的取值范围为:0 – 255或用百分数值的取值范围为:0.0% – 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A参数,取值在0~1之间,不可为负值

  • 03

    RGBA语法示例: .div {background: rgba(200,200,200,0.5);}

  • 04

    接下来演示如和让边框透明: 给div设置如下样式: div {    width: 100px;    height:100px;    border-top:10px solid  rgba(200,200,200,0.25);    border-right:10px solid  rgba(200,200,200,0.5);    border-bottom: 10px solid  rgba(200,200,200,0.75);    border-left:10px solid  rgba(200,200,200,1);} 显示效果如图所示,每一边的透明度都不一样。当我们需要设置边框的透明度的时候,根据需要填写最后一个数值在0-1之间就可以了。

(0)

相关推荐

  • CSS设置DIV背景色渐变显示

    在开发网站的时候通常需要对网站的整体颜色进行修改.下面,我们来看看如何用CSS设置DIV背景色渐变显示吧. 操作方法 01 打开软件 可以使用Dreamweaver或Visual studio软件,比 ...

  • css设置div在网页中垂直居中

    css设置div在网页中垂直居中方法很多,这是本人常用的方法 我们要做一个在网页中垂直水平方向都居中的一个div来作一个如下效果的框 操作方法 01 本实例以新文档开始 02 先放置一个div,并且设 ...

  • 如何用css设置一个table中的td的边框

    在网页设计过程中,怎么设置table中td的边框,设置div的边框都是一样 操作方法 01 html代码: <table> <tr> <td><input t ...

  • 使用CSS设置div水平居中

    在网页编辑中,我们常常使用div来进行网页的布局.但是如何使div水平居中呢?我认为这一种方法比较于其他的方法更好用一些(个人建议). 准备工作 01 打开sublime text3,并且新建一个ht ...

  • 如何用CSS设置背景图片

    我们经常会看一些如游戏.电影.购物网上那种五颜六色的网页画面,包括导航菜单,网页主题背景,红的,黑的,(如小简头,像框等)五颜六色的都有,那么我们如何在网页中设置背景图片呢? 列:设置元素背景属性 0 ...

  • css设置虚线边框

    border-style属性用来定义边框的样式,可以使用dashed属性定义一个虚线边框. 语法:border-style:dashed; 操作方法 01 打开html开发工具,新建一个html代码页 ...

  • css设置表格边框合并;css设置table边框合并

    table表格是制作前端常常需要使用到的一个标签,表格边框默认是不合并的,通过使用border-collapse:collapse可以对表格设置合并的边框效果. 操作方法 01 打开前端开发工具,新建 ...

  • CSS设置DIV的定位绝对定位和相对定位

    设置DIV或者其他元素在浏览器中显示的位置是HTML布局中重要的一个内用,我们通过合理的布局使得我们的网站美观大方,这里我就来说说如何使用CSS来给div定位. 操作方法 01 首先我不给div定位来 ...

  • css怎样设置div背景色渐变

    Css设置 div渐变背景可以让网页看起来更有层次感,那么css怎样设置 div背景颜色渐变呢?今天小编我就来分享一下 css渐变背景的方法. 操作方法 01 举个例子,既然是要设置div渐变,所以我 ...