css3边框阴影效果

下面来说下css3阴影的语法:
box-shadow:none | <shadow> [ , <shadow> ]*
<shadow> = inset? && [ <length>{2,4} && <color>? ]
取值:
none: 无阴影
<length>①: 第1个长度值用来设置对象的阴影水平偏移值。可以为负值
<length>②: 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
<length>③: 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
<length>④: 如果提供了第4个长度值则用来设置对象的阴影外延值。可以为负值
<color>: 设置对象的阴影的颜色。
inset: 设置对象的阴影类型为内阴影。该值为空时,则对象的阴影类型为外阴影
下面来看看语法中的内阴影是什么效果,修改源码:

  1. div{width:300px; height:100px;border:1px solid #2cb7fe;text-align:center;
  2. -webkit-box-shadow:3px 3px 10px #9edeff inset;box-shadow:3px 3px 10px #9edeff inset;
-webkit-box-shadow:0px 0px 6px #e36e73;
-moz-box-shadow:0px 0px 6px #e36e73;
box-shadow: 0px 0px 6px #e36e73;
时间: 2024-12-06 06:40:41

css3边框阴影效果的相关文章

CSS3边框 阴影 box-shadow

box-shadow是向盒子添加阴影.支持添加一个或者多个. box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; 参数介绍: box-shadow: h-shadow v-shadow blur spread color inset; h-shadow:水平阴影的偏移值,必需,可以为负值. v-shadow:纵向阴影的偏移值,必需,可以为负值. blur:阴影模糊值,可选,不能为负值. spread:阴影的扩展,可选,可以为负值. c

《图解CSS3——第3章 CSS3边框-1》

提到边框,大家首先想到的是CSS的boder属性.不错,border属性是CSS种盒模型基础属性之一.在CSS3中,关于边框的运用会有什么样的不同之处呢?又将如何使用?本章我们带着这些问题开始我们的CSS3边框之旅. 3.1 CSS3边框简介 border属性在CSS1中就已经定义了,使用它可以设置元素的边框风格. 3.1.1 边框的基本属性 CSS1和CSS2中的边框属性确实很简单,其主要包括三个类型值. border-width:设置元素边框的粗细. border-color:设置元素边框的

CSS3边框温故

1.简介:border属性在CSS1中就已经定义了,用来设置元素边框风格,设置不同的边框.颜色.粗细 2.基本属性,包括三个类型值:(1)border-width:设置元素边框的粗细,默认3~4px(2)border-color:设置元素边框的颜色,默认色就是字体颜色(3)border-style:设置元素边框的类型,默认[none]缩写语法:border:border-width border-style border-color;注:缩写后每个属性之间使用空格隔开,它们之间没有先后顺序 3.

《图解CSS3——第3章 CSS3边框-2》

3.2 CSS3边框颜色属性 3.2.1 border-color属性的语法及参数 border-color的语法看上去和CSS1中的完全相同,但为了避免与border-color属性的原功能发生冲突,CSS3在这个属性上做出了一定的修改.语法如下: border-color : [ <color> | transparent ] { 1, 4} | inherit 换句话说,如果使用border-color这种缩写语法,将不会有任何效果,必须将这个border-color标准写法拆分成四个边

CSS3 边框图片

CSS3 边框图片 通过 CSS3 的 border-image 属性,可以使用图片来创建边框:border-image是用来代替border-style的,即border的大小取决于. 而且有border-image的侧边就没有border-shadow的什么事.哈哈,他俩冲突.注意,border-image不占用页面位置(他是脱离文档流的!!!). - 实现原理 - 参数解析 - - 图片切片border-image-slice - - 边框图片宽度border-image-width -

[HTML] CSS3 边框

CSS3 边框 用CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,如Photoshop. 在本章中,您将了解以下的边框属性: border-radius box-shadow border-image 浏览器支持 Internet Explorer 9+ 支持 border-radius 和 box-shadow. Firefox, Chrome, 和 Safari 支持所有最新的 border 属性. 注意: 前缀是-webkit-的Safari支持阴影边框. 前缀

兼容低版本IE浏览器的边框阴影效果

兼容低版本IE浏览器的边框阴影效果:使用box-show属性可以实现边框阴影效果,但是IE8和IE8以下浏览器不支持此属性,不过可以通过以下方式实现,当然实现全兼容的方式有多种,下面是一种比较简陋的方式,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www

CSS3边框border-radius

一.官方解释 设置或检索对象使用圆角边框.提供2个参数,2个参数以"/"分隔,每个参数允许设置1~4个参数值,第1个参数表示水平半径,第2个参数表示垂直半径,如第2个参数省略,则默认等于第1个参数. 水平半径:如果提供全部四个参数值,将按上左(top-left).上右(top-right).下右(bottom-right).下左(bottom-left)的顺序作用于四个角. 如果只提供一个,将用于全部的于四个角. 如果提供两个,第一个用于上左(top-left).下右(bottom-r

第八十节,CSS3边框图片效果

CSS3边框图片效果 学习要点: 1.属性初探 2.属性解释 3.简写和版本 本章主要探讨HTML5中CSS3中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一.属性解释     CSS3提供了一个新的属性集合,用这几个属性可以嵌入图片形式的边框.这样,边框就可以自定义了.     1.border-image-source                      //引入背景图片地址     2.border-image-slice