css阴影设置透明度,css3圆角阴影透明度

css3圆角阴影透明度

.box{

width: 200px;

height: 200px;

border: 2px solid #000;

background-color: gold;

margin: 50px auto 0;

/*border-top-left-radius: 100px 50px;*/

/*左上角为椭圆圆角*!*/

/*border-top-left-radius: 100px;

border-top-right-radius: 100px;左、右上角为正圆圆角*/

/*border-radius: 40px;曲率半径为40的圆角矩形*/

/*border-radius: 20%;最大200px，20%即40px*/

border-radius: 50%;/*正圆*/

}

.box1{

width: 200px;

height: 40px;

background-color: gold;

margin: 100px auto 0;

/*水平偏移垂直偏移羽化大小扩展大小颜色*/

box-shadow: 10px 10px 10px 0px #bfa;

}

.box2{

width: 200px;

height: 40px;

background-color: gold;

margin: 100px auto 0;

/*水平偏移垂直偏移羽化大小扩展大小颜色是否内阴影*/

box-shadow: 0px 0px 20px 2px red inset;

}

body{

background-color: cyan;

}

.box3{

width: 200px;

height: 200px;

/*background: url(images/location_bg.jpg);*/

background-color: gold;

margin: 50px auto 0;

border: 2px solid #000;

border-radius: 50%;

/*透明度30%，文字也透明了*/

opacity: 0.3;

filter: alpha(opacity=30);/*兼容IE*/

text-align: center;

line-height: 200px;

}

.box4{

width: 200px;

height: 200px;

/*背景色变透明，但文字不会透明*/

background-color: rgba(255,215,0,0.3);

margin: 50px auto 0;

/*边框透明*/

border: 2px solid rgba(0,0,0,0.3);

border-radius: 50%;

text-align: center;

line-height: 200px;

}

床前明月光

css阴影设置透明度,css3圆角阴影透明度相关推荐

【转】CSS3 圆角阴影渐变透明旋转等功能详述
本文转载自yu0319@126<CSS3圆角阴影渐变透明旋转等功能详述> 随着浏览器的升级,CSS3已经可以投入实际应用了. 但是,不同的浏览器有不同的CSS3实现,兼容性是一个大问题.上 ...
css设置四个圆角,css怎么设置4个圆角？css设置4个圆角方法
div如何设置css圆角边框?css设置4个圆角方法有哪些?这对于刚刚入门的css新手,比较陌生,那么css怎么设置4个圆角?下面我们来看一下css设置4个圆角方法.[推荐学习:CSS3教程] CSS ...
html盒子阴影的语法,css3 盒阴影box-shadow
1.描述: box-shadow可以设置一个或多个下拉阴影的框,此属性使用于盒模型不是用来设置文字阴影,设置文字阴影可以使用text-shadow 2.语法: box-shadow:h-shadow ...
怎样使用css让矩形出现圆角,CSS中设置元素的圆角矩形
圆角矩形介绍在CSS中通过border-radius属性可以实现元素的圆角矩形. border-radius属性值一共有4个,左上.右上.左下.右下. border-radius属性值规则如下:第一 ...
css3圆角360度转动画,target，框架集，css3过渡动画，css3圆角-阴影-透明度，运动曲线，图片文字遮罩，变形...
target 模拟后台服务器框架集 frameset和body不合,所以如果用frameset就不能有body标签利用框架可以把浏览器窗口划分为若干个区域,每个区域就是一个框架,在其中分别显示不 ...
【响应式Web前端设计】css如何设置边框的圆角样式？border-radius属性设置圆角样式（图文）
border-radius包含5种设置圆角样式方式: border-radius :同时设置4个边框的圆角样式. border-top-left-radius :设置左上角边框的圆角样式. borde ...
css圆角框四周阴影,css3圆角边框，边框阴影
border-radius向元素添加圆角边框,css3中的.IE9+ chrome safari5+ firefox4+ 现在都支持.可以向input div等设置边框.与border相似,可以四个角 ...
怎么设置圆角html5,css怎么设置圆角？
div如何设置css圆角边框?css设置4个圆角方法有哪些?这对于刚刚入门的css新手,比较陌生,那么css怎么设置4个圆角?下面我们来看一下css设置4个圆角方法. 可以使用css3的border- ...
php 图片圆角透明,CSS_使用CSS3实现圆角,阴影,透明，CSS实现圆角,阴影,透明的方法 - phpStudy...
使用CSS3实现圆角,阴影,透明 CSS实现圆角,阴影,透明的方法很多,传统的方法都比较复杂,用CSS3就方便很多了,虽然现在各浏览器对CSS3的支持还不是很好,但不久的将来CSS3就会普及. 1.圆 ...

css阴影设置透明度,css3圆角阴影透明度

css阴影设置透明度,css3圆角阴影透明度相关推荐

最新文章

热门文章

css阴影设置透明度,css3圆角 阴影 透明度

css阴影设置透明度,css3圆角 阴影 透明度相关推荐

最新文章

热门文章

css阴影设置透明度,css3圆角阴影透明度

css阴影设置透明度,css3圆角阴影透明度相关推荐