css 圆角渐变边框透明背景

超简单CSS3实现圆角、阴影、透明效果

CSS实现圆角,阴影,透明的方法很多,传统的方法都比较复杂,用CSS3就方便很多了,虽然现在各浏览器对CSS3的支持还不是很好,但不久的将来CSS3就会普及. 1.圆角 CSS3实现圆角有两种方法. 第一种是背景图像,传统的CSS每个元素只能有一个背景图像,但是CSS3可以允许一个元素有多个背景图像.这样给一个元素添加4个1/4圆的背景图像,分别位于4个角上就可以实现圆角了. .box { /* 首先定义要使用的4幅图像为背景图 */ background-image: url(/img/top

div添加透明边框透明背景css

-webkit-box-shadow: 1px 0px 15px #696969; background: rgba(255, 255, 255, 0.45) none repeat scroll 0 0 !important;

【CSS】使用边框和背景

1. 应用边框样式先从控制边框样式的属性开始.简单边框有三个关键属性:border-width.border-style 和 border-color . <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example</title> <style type="text/css"

CSS元素、边框、背景、列表样式

一.元素样式 1.width控制元素宽度 2.height控制元素宽度 3.padding控制元素内边距内容与边框之间的距离 4.margin控制元素外边距元素边框与其他元素边框之间的距离,如果两元素都设置了margin属性,浏览器只对较大值有效. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></tit

【转】Android开发笔记——圆角和边框们

原文地址:http://blog.xianqu.org/2012/04/android-borders-and-radius-corners/ Android开发笔记——圆角和边框们在做Android界面开发时,我们往往希望它尽可能优美,尽可能显得专业.于是你看了看其他应用,哇,好多边框和圆角啊.你是不是也想给自己的应用加上边框和圆角效果?呃……那怎么做呢?如果你是从web前端跑到Android来的,那么我想你一定想到了不下三种解决方案.如用图片替代,用CSS3定义,用JS画.在Android

CSS3 02. 边框、边框圆角、边框阴影、边框图片、渐变、线性渐变、径向渐变、背景、过渡transition、2D转换

边框圆角 border-radius 每个角可以设置两个值,x值.y值 border-top-left-radius:水平半径垂直半径 border-radius:水平半径/垂直半径 border-radius:60px 30px 120px 160px/160px 120px 30px 60px ; 单位:百分比和像素.最好使用% 练习盒子阴影 box-shadow 可设置多重边框阴影,增强立体感 box-shadow: 5px 5px 27px red,-5px -5px 27px gr

css：设置div边框透明+渐变

写作背景: 觅兼职--登陆页面,UI给的原型图很漂亮,其中有一个图要求div外面有一圈透明度为0.37且带有渐变的边框.效果图如下: 在写的时候遇到了一点小小的问题:无法给同一个div设置圆角的透明+渐变边框.但是,又不能不做是不是,费了一番心思查资料,下面是解决方案: 1.分成两个div叠加的形式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&g

第 17 章 CSS 边框与背景[下]

学习要点: 1.设置背景主讲教师:李炎恢本章主要探讨 HTML5 中 CSS 边框和背景,通过边框和背景的样式设置,给元素增加更丰富的外观. 一．设置背景盒模型的尺寸可以通过两种方式实现可见性,一种就是之前的边框,还有一种就是背景. CSS 背景设置的样式表如下: 属性说明 CSS 版本 background-color 背景的颜色 1 background-image 背景的图片 1/3 background-repeat 背景图片的样式 1/3 background-size 背景图

第 17 章 CSS 边框与背景[上]

学习要点: 1.声明边框 2.边框样式 3.圆角边框主讲教师:李炎恢本章主要探讨 HTML5 中 CSS 边框和背景,通过边框和背景的样式设置,给元素增加更丰富的外观. 一．声明边框边框的声明有三个属性设置,样式表如下: 属性值说明 CSS 版本 border-width 长度值设置边框的宽度,可选 1 border-style 样式名称设置边框的样式,必选 1 border-color 颜色值设置边框的颜色,可选 1 这三个属性值,只有 border-style 是必须声明,才

第七十四节，css边框与背景

css边框与背景学习要点: 1.声明边框 2.边框样式 3.圆角边框本章主要探讨HTML5中CSS边框和背景,通过边框和背景的样式设置,给元素增加更丰富的外观. 声明边框边框的声明有三个属性设置,样式表如下属性值说明 CSS版本 border-width

27.给input边框和背景颜色设置全透明

给input边框和背景颜色设置全透明,但是里面的字不会消失 1.让背景颜色变透明(二选一) background-color:rgba(0,0,0,0); background:rgba(0,0,0,0); 2.让边框变透明(二选一) border-color: transparent; border: 1px solid rgba(0,0,0, 0); 3.css3文字渐变 color:#DA0A0A; background-image: -webkit-gradient(linear, 0

css 尺寸、边框、内边距、背景以及css Sprite

上节课回顾: HTML标签: 格式排版 p 段落双br 换行单hr 分隔线单h1~h6 标题双pre 原样格式化输出双div 标签,无任何特殊意义 HTML标签 :文本 <em> 强调倾斜双<ruby></ruby> 加拼音 <rt></rt> <strong> 加粗强调双<mark></mark> 标记选中双<sub></sub> 下标<sup><

第50天学习打卡（CSS 圆角边框盒子阴影定位）

4.4圆角边框圆角边框: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>  <style>

css透明背景兼容方案

css透明是一个技术活,因为这里面涉及到了IE8及以下版本不兼容opacity这个css3属性,而filter:alpha(opacity=80)这个值则是不兼容IE6.网上比较流行的透明css是这样子写的. .transparent_class { /* IE 5-7 */ filter: alpha(opacity=50); /* Netscape */ -moz-opacity: 0.5; /* Safari 1.x */ -khtml-opacity: 0.5; /* Good brow

使用RGBa和Filter实现不影响子元素的CSS透明背景

点击查看原文问题如果我们想要一个元素拥有半透明的背景,我们有两个选择: 使用CSS和 opacity 做一张 24-bit PNG 背景图片在CSS中使用opacity有两个问题,一是为了适应所有的浏览器,我们要对付opacity讨厌的语法:二是opacity不仅使目标元素的背景变得半透明,而且使它所有的子元素的背景也变成了半透明.这意味着它里面所有的文本(译者注:图片也一样)都具有同样的透明度,我敢肯定没几个人想要这样的效果.可以通过添加一些不必要的元素,使用CSS定位技巧类似的手段

复习-css边框和背景属性

css边框和背景属性 border:所有边框属性 border-width:四条边框的宽度 border-style:设置边框样式,主要有dotted.solid.double border-color:设置四条边框的颜色 border-left:在一个生命中设置所有左边框属性,对应还有border-right border-left-color:左边框颜色,对应还有border-right-color border-left-style:左边框样式,对应还有border-right-style

CSS3透明背景+渐变样式

CSS3透明背景+渐变样式转载自博文:<CSS3透明背景+渐变样式> http://blog.csdn.net/netbug_nb/article/details/44343809 效果: 核心代码如下: .map-interview { background-image:-webkit-linear-gradient( to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 5%, rgba(0,0,0,0.6) 10%, rgba(0,0,0,0.6) 9

CSS实现多重边框和内凹圆角

CSS实现多重边框 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>CSS实现多重边框</title> <style> div { width: 100px; height: 150px; margin: 40px auto; text-align: center; background

【WEB基础】HTML & CSS 基础入门（5）边框与背景

前面(HTML图片) 漂亮的网页肯定少不了边框与背景的修饰,本篇笔记就是说明如何为网页上的元素设置边框或者背景(背景颜色和背景图片). 之前,先了解一下HTML中的图片元素,因为图片标签的使用非常简单,所以就插在这里说明一下. HTML中的图片,我们只需要掌握它的标签写法以及它的三个属性就基本OK了. 写法格式:<img src="图像源文件的路径"/> 主要属性: 说明:图片<img/>标签跟段落<p></p>标签不太一样,<im

DIV+CSS圆角边框

简洁型css圆角: 方法1: 简洁型css圆角矩形 code1: <style type="text/css"> .b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b{display:block;overflow:hidden;} .b1,.b2,.b3,.b1b,.b2b,.b3b{height:1px;} .b2,.b3,.b4,.b2b,.b3b,.b4b,.b{border-left:1px solid #999;border-right:1

CSS圆角进化论

CSS圆角发展过程大致经历了3个阶段,包括: 背景图片实现圆角 CSS2.0+标签模拟圆角 CSS3.0圆角属性(border-radius属性)实现圆角 ☛背景图片实现圆角:==使用背景图片实现圆角的方式很多,实现的方式和圆角的切图方式关系密切实现方式有多种,主要讲解2种: (一)宽度固定,高度自适应实现关键点,4个块级标签构成圆角矩形容器(box)—设置固定宽度,同圆角宽度顶部圆角(radius-top)—使用背景图片实现顶部圆角内容( content )—放置主体内容底部圆

css 圆角渐变边框透明背景

热门专题