css3背景渐变与边框阴影

一、盒子阴影和文字阴影
   box-shadow:
       盒子阴影 ie9
       5个参数：
           参数1：水平偏移量 +- 必选
           参数2：垂直偏移量 +- 必选
           参数3：阴影模糊值 + 必选
           参数4：阴影外延值 + 可选
           参数5：阴影颜色必选
       外延值是可以省略的
       一个盒子可以使用多个阴影
       box-shadow:0 0 12px 3px red,2px 2px 12px 3px blue;
       内阴影：阴影默认是外阴影
           inset
           box-shadow:inset 0 0 3px 10px red;
   text-shadow:
       文本阴影
       4个参数，没有外延值 ie10
       text-shadow:1px 1px 1px red;
二、图像边框
   border-image 设置图片边框 ie10
   border-image:border-image-source||border-image-slice[/border-image-width?[/border-image-outset]?]?||border-image-repeat
   border-image-source:用在边框图像的路径
   border-image-slice:图片边框向内的偏移量
   border-image-width:图片边框的宽度
   border-image-outset:图片边框图像区域超出变量的偏移量
   border-image-repeat:指定图片边框背景图的填充方式
   border-image-repeat: stretch | repeat | round
       strecth:默认，拉伸填充
       repeat:指定平铺填充背景图片，当遇到边界时，会被截断
       round：指定平铺填充背景图片，会根据边框的尺寸动态的调整图片的大小，直到图片的大小刚好可以充满整个边框
三、背景 background
   1，背景渐变
       没有渐变的时候，做渐变效果，使用一张1px的图片，上下渐变，使用repeat-x|y平铺即可实现渐变的状态
       css3中有了渐变属性，ie9开始兼容
       语法：
           background-image:-webkit-linear-gradient(top,red,blue);
       -webkit-:谷歌前缀
       -moz-:火狐
       -ms-:ie
       -o-:欧朋
       1）线性渐变：
           -webkit-linear-gradient(top,red,blue);
               参数1：top 从上到下渐变
                   bottom 从下到上渐变
                   left 从左到右渐变
                   right 从右到左渐变
                   top left 左上到右下渐变
                   deg 角度
                   px 值
               参数2：从哪个颜色开始渐变
               参数3：渐变到哪个颜色
               使用角度渐变，第一个值是角度，360deg，不同浏览器有不同的分歧：
                   谷歌，火狐，ie，欧朋水平向左为0deg，向下90deg；
                   如果不加前缀就是w3c的标准，垂直向下为0deg，水平向左为90deg
               通常我们不使用角度变化，一般使用方位词
               渐变颜色可以有很多，使用逗号隔开，每个颜色后边可以跟一个百分比，代表从哪里开始这个颜色的渐变，都小于100%
       2）径向渐变
           -webkit-radial-gradient()
           渐变起始点使用px值确定：
               -webkit-radial-gradient(100px 80px,red,blue,yellow)

css3背景渐变与边框阴影相关推荐

13.HTML背景、背景渐变、盒子阴影
背景属性属性说明示例 background-color 设置元素的背景颜色 background-color:#FFAAAA; background-image 设置元素的背景图片 backgr ...
css3 背景属性与边框属性的新增 200303
新增属性 background-clip 例子 background-origin background-size 添加多个图片边框属性 # 图片边框需要的图片兼容性不是很好盒阴影
CSS3背景渐变及文本效果
一.渐变 1.Linear Gradients-线性渐变颜色沿着一条直线过渡:从左到右.从右到左.从上到下等 1.background: linear-gradient(position , col ...
【css】渐变-背景渐变、边框渐变、文字渐变
渐变 ● 线性渐变(向下/向上/向左/向右/对角线) ● 径向渐变(由其中心定义) 线性渐变 background-image: linear-gradient(direction, color-st ...
背景渐变如何设置透明度
背景渐变如何设置透明度项目最近这几天正在做不同主题的颜色配置方案,要根据用户输入的颜色来配置整个主题的颜色,让人头疼的是,其中一个主题所有的列表头部背景色都是2到3组渐变值的线性渐变,也就是说,要根 ...
css3 渐变背景圆形,CSS 教程（5）-Css3-1,边框,背景,渐变,
1.CSS3 边框用 CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,如 Photoshop 在 CSS3 中 border-radius 属性被用于创建圆角 div { ...
视频教程-CSS3网页设计与制作(6-11)：颜色特性/新型盒模型/边框/背景/渐变-HTML5/CSS
CSS3网页设计与制作(6-11):颜色特性/新型盒模型/边框/背景/渐变知识传播美丽,分享传递快乐.作者主要从事Java服务器端技术.前端与移动开发技术的研究和授课,已有10多年从业经验. IT老 ...
HTML背景渐变圆圈,CSS3 基础（1）——边框圆角背景渐变
css3 简介 CSS3被拆分为"模块".旧规范已拆分成小块,还增加了新的. 一些最重要CSS3模块如下: 选择器.盒模型.背景和边框.文字特效.2D/3D转换.动画.多列布局 C ...
css3背景、边框、和补丁相关属性
border :基本语法 border: border-width || border-style || border-color 默认值为: medium none . border-color 的 ...

css3背景渐变与边框阴影

css3背景渐变与边框阴影相关推荐

最新文章

热门文章