CSS3盒模型阴影属性

CSS3盒子阴影
属性box-shadow也是CSS3新增的一个重要属性，用来定义元素的盒子阴影。

  1. inset： 阴影类型， 可选值。 如果不设置， 其默认的投影方式是外阴影； 如果取其唯一值“ inset”， 就是给元素设置内阴影。
  2. x-offset： 阴影水平偏移量， 其值可以是正负值。 如果取正值， 则阴影在元素的右边， 反之取负值， 阴影在元素的左边。
  3. y-offset： 阴影垂直偏移量， 其值可以是正负值。 如果取正值， 则阴影在元素的底部， 反之取负值， 阴影在元素的顶部。
  4. blur- radius： 阴影模糊半径， 可选参数。 其值只能是正值， 如果取值 为“ 0” 时， 表示阴影不具有模糊效果， 如果取值越大， 阴影的边缘就越模糊。
    http:/ /www.iis7.com/b/plc/
  5. spread- radius： 阴影扩展半径， 可选参数。 其值可以是正负值， 如果取值为正值， 则整个阴影都延展扩大， 反之取值为负值， 则整个阴影都缩小。
  6. color： 阴影颜色， 可选参数， 如果不设定任何颜色 时， 浏览器会取默认色， 但各浏览器 默认色不一样，
  7. 在图片上加内阴影，先给图片添加一个容器，如：div等，

原文地址：http://blog.51cto.com/13941970/2292323

时间： 2024-09-30 19:16:44

CSS3盒模型阴影属性的相关文章

IT兄弟连 HTML5教程 CSS3属性特效 盒模型阴影

除了为文字添加阴影,我们还可以为盒模型添加阴影.盒模型阴影的属性名称为box-shadow,此属性与text-shadow一样有4个值,前两个值分别表示水平方向位移距离和垂直方向的位移距离,第三个值表示阴影的模糊半径(包含0及以下的值均表示无模糊),最后一个则是阴影的颜色.前Chrome 16+,FireFox8+,Opera11.6+,Safari5.1+以及IE9+均可直接使用box-shadow,而不需要-webkit-诸如此类的前缀. 语法格式如下所示: box-shadow:[inse

CSS3盒模型温故

CSS有一种基础设计模式叫盒模型,定义了Web页面中的元素是如何看做盒子来解析的.每一个盒子有不同的展示界面,下面就来介绍盒模型,主要有一下几种盒模型:inline.inline-block.block.table.absolute position.float.浏览器把每个元素看做一个盒模型,每个盒模型是由以下几个属性组合所决定的:display.position.float.width.height.margin.paddinghe border等,不同类型的盒模型会产生不同的布局 什么是盒

css3 盒模型

0,前言 在css2.1 之前,我们都熟知的两种盒模型,一种是w3c标准盒模型,另外一种是怪异模式下的盒模型.在css3之前我们一直使用的是标准盒模型,但是标准盒模型的宽度总是需要小心的去使用,稍有不甚,有会带来混乱.css3让我们之前了解的怪异模式能够很好的在页面中使用,下面来了解下上面提到的w3c标准盒模型和怪异模式下的盒模型. div { width: 200px; height: 100px; padding: 20px; border:30px solid blue; margin:

盒模型 box-sizing 属性

css3增添了盒模型box-sizing属性,box-sizing属性值可以有下面三个值: content-box:默认值,让元素维持W3C的标准盒模型.元素的宽度/高度(width/height)(所占空间)等于元素边框宽度(border)加上元素内边距(padding)加上元素内容宽度 /高度(content width/height)即:Element Width/Height = border+padding+content width/height. border-box:让元素维持I

盒模型的属性丶display显示丶浮动

一丶盒模型的属性(重要) 1.padding padding是标准文档流,父子之间调整位置 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>padding</title> <style> *{ padding: 0; margin: 0; } .box{ width: 200px; height: 200px; background

盒模型的属性/display显示(重要)/浮动(重要)

一.关于上篇博客的总结 1.高级选择器: (1).后代选择器***** 选择的是儿子,孙子,重孙子 div p{} (2).子代选择器 选择的是亲儿子 div>p (3).组合选择器 div,p,a,span{} (4).交集选择器 div.active{} (5).属性选择器 input[type="text"]{} (6),伪类选择器 爱恨准则 a:link{} a:visited{} a:hover{} a:active{} 对a来设置字体颜色,一定要选中a (7).伪元素

CSS3盒模型之box-sizing

这些天在做一个手机端的页面,遇到了一些问题!首当其冲的就是盒子的溢出问题!大家都知道,手机的尺寸各异,各种型号的手机多得能闪瞎你们的眼睛,为了能 让这些设置更好的浏览我们的页面,我们已经不能固定页面的大小了.所以很多时候我们对于大小的设置都需要使用百分比,嗯,试试看吧! 对于一个导航,我们初始是想这样: 代码如下: css: nav{width: 100%;background: #001125;overflow: hidden} nav a{display: block;float: left

CSS3盒模型display:box;box-flex:3;

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>盒模型display:box;</title> </head> <body> <article class=&q

css3盒模型

css2.1盒模型: 当你定义盒子的宽高后:如果添加padding和border值后盒子的宽高会被撑大 盒子的高度=定义的高度+(padding-top + padding-bottom)+(border-top + border-bottom); 盒子的宽度=定义的宽度+(padding-left+ padding-right)+(border-left+ border-right); css3.0盒模型: 当你定义盒子高度后:如果添加padding和border值后盒子大小不会改变,他会向内