探索盒子阴影box-shadow

盒子阴影之探索

盒子阴影:box-shadow

作用;在盒子不同的方位添加你想要的阴影效果。

box-shadow有六个参数值,下面一一举例说明

语法:

Box-shadow: offset-x | offset-y | blur | sperd | color| position |

注意!!!以上也是box-shadow默认的排序!

第一:offset-x

阴影的水平偏移量,即X轴上阴影的位置,正值出现在元素的右侧负值在左侧。

当为正值代码:

div

{

width: 200px;

height: 200px;

background: yellow;

box-shadow: 20px 0px 10px 10px red;

}

运行结果:

当为负值代码:

div

{

width: 200px;

height: 200px;

background: yellow;

box-shadow: -20px 0px 10px 10px red;

}

运行结果:

第二:offset-y

阴影垂直偏移量,即y轴上的阴影位置,正值是使阴影出现在元素的下方,负值出现在元素上方。

当为正值代码

div

{

width: 200px;

height: 200px;

background: yellow;

box-shadow: 0px 20px 10px 10px red;

margin: 0px auto;

}

当为负值代码

div

{

width: 200px;

height: 200px;

background: yellow;

box-shadow: 0px -20px 10px 10px red;

margin: 0px auto;

}

第三:blur

阴影的模糊半径,值越大越显得越模糊不清,一下为对比

当值为0时

div

{

width: 200px;

height: 200px;

background: yellow;

margin-top: 200px;

margin-left:  400px;

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

}

当值为10时的模糊程度

div

{

width: 200px;

height: 200px;

background: yellow;

margin-top: 200px;

margin-left:  400px;

box-shadow: 0px 0px 10px 20px red;

}

当值为30时的模糊程度

div

{

width: 200px;

height: 200px;

background: yellow;

margin-top: 200px;

margin-left:  400px;

box-shadow: 0px 0px 10px 20px red;

}

第四:阴影的尺寸

数值越大距离边框的距离越远

当值为10px时

div

{

width: 200px;

height: 200px;

background: yellow;

margin-top: 200px;

margin-left:  400px;

box-shadow: 0px 0px 0px 10px red;

}

当值为50px时

div

{

width: 200px;

height: 200px;

background: yellow;

margin-top: 200px;

margin-left:  400px;

box-shadow: 0px 0px 0px 50px red;

}

第五:阴影的颜色

把红色换成蓝色

div

{

width: 200px;

height: 200px;

background: yellow;

margin-top: 200px;

margin-left:  400px;

box-shadow: 0px 0px 0px 50px blue;

}

第六:position

默认值为外部阴影,一般情况下这个值不会给出,如果需要内部阴影在后面加上inset即可!

div

{

width: 200px;

height: 200px;

background: yellow;

margin-top: 200px;

margin-left:  400px;

box-shadow: 20px 20px 10px 10px blue inset;

}

默认值时

div

{

width: 200px;

height: 200px;

background: yellow;

margin-top: 200px;

margin-left:  400px;

box-shadow: 20px 20px 10px 10px blue;

}

当然阴影的形状是跟随盒子的变化而变化的,当为圆形盒子时

div

{

width: 200px;

height: 200px;

background: yellow;

margin-top: 200px;

margin-left:  400px;

border-radius:50% ;

box-shadow: 20px 20px 10px 10px blue;

}

多重阴影

box-shadow 属性能在单个元素上接受多个阴影。每个阴影通过用逗号分隔的 box-shadow 属性列表来加载。

div

{

width: 200px;

height: 200px;

background: yellow;

margin-top: 200px;

margin-left:  400px;

box-shadow: 20px 20px 10px 0px rgba(0,0,0,0.5) inset,20px 20px 10px 0px rgba(0,0,0,0.5);

}

时间: 2024-10-07 08:48:48

探索盒子阴影box-shadow的相关文章

·DIV 行内关联 box-shadow对象盒子阴影以及图片阴影

盒子阴影样式单词:box-shadow 语法 <style> div{box-shadow:0 0 1px #000 inset;} </style> 其中,第一个和第二个0分别代表边框间距靠左和靠上:1px表示阴影范围:#000表示阴影颜色为黑色:inset 代表框内阴影 ,没有inset 则代表框外阴影. 需要注意的是: box-shadow:0px 0px 1px #000当第1个值为0时,代表左右边框阴影 为1px范围第1个值为正整数 代表 左边框阴影第1个值为负整数 代表

字体图标 盒子阴影

字体图标 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>字体图标</title> <!-- 使用第三方库 --> <!-- <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel=&

盒子阴影 box-shadow

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>盒子阴影</title> <style> .box { width: 200px; height: 200px; background-color: orange; margin: 200px auto; /*opacity: 0;*/ transition: .3s; } .box

css.盒子阴影

div{ width:100px; height:100px; font-size:212px; background-color:red; border-radius: 15px 24px 33px 42px; /* 四个半径值分别是左上角.右上角.右下角和左下角,顺时针 */  } <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-

OpenGL 阴影之Shadow Mapping和Shadow Volumes

先说下开发环境.VS2013,C++空项目,引用glut,glew.glut包含基本窗口操作,免去我们自己新建win32窗口一些操作.glew使我们能使用最新opengl的API,因winodw本身只包含opengl 1.1版本的API,根本是不能用的. 其中矩阵计算采用gitHub项目openvr中的三份文件, Vectors.h ,Matrices.h, Matrices.cpp,分别是矢量与点类,矩阵类,我们需要的一些操作,矢量的叉乘和点乘,矩阵转置,矩阵的逆,矩阵与矢量相剩等. 这里主要

盒子模型(Box Model)

盒子模型(Box Model) ■ 盒子模型--概念 在网页设计中常用的属性名:内容(content),填充(padding),边框(border),边界(margin),CSS 盒子模式都具备这些属性. 细节说明: ?html 元素都可以看成一个盒子 ?盒子模型的参照物不一样,则使用的 css 属性不一样.比如:从 div1 的角度看,是 margin-right,从 div2 看,则是 margin-left. ?如果你不希望破坏外观,则尽量使用 margin 布局,因为 padding 可

CSS3 --添加阴影(盒子阴影、文本阴影的使用)

CSS3 - 给div或者文字添加阴影(盒子阴影.文本阴影的使用)CSS3定义了两种阴影:盒子阴影和文本阴影.其中盒子阴影需要IE9及其更新版本,而文本阴影需要IE10及其更新版本.下面分别介绍两种阴影的使用: 1,盒子阴影(1)盒子阴影的属性是 box-shadow1box-shadow:5px 5px 10px gray;前两个值分别表示阴影水平方向和垂直方向的偏移量.第三个值表示模糊距离.最后一个值是阴影颜色. (2)盒子阴影是可以随着盒子形状而自动变化的原文:CSS3 - 给div或者文

css背景图片、圆角、盒子阴影、浮动

一.css背景图片 1.概述 背景是css中一个重要的的部分,也是需要知道的css的基础知识之一.这里主要介绍有关背景图片的5种常见属性,分别是: (1). background-color: rgb(0, 0, 255); background-color: #0000ff; background-color 也可被设置为透明(transparent),这会使得其下的元素可见. 3.背景图(background-image) background-image 属性允许指定一个图片展示在背景中.

纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果

大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事情,很多代码都能实现. 下面给大家简单介绍两种最为常见的圆角边框和盒子阴影,同时附上一个iphone 手机效果,提供大家练习. 1.border-radius 圆角矩形 语法格式: border-radius:  水平半径/垂直半径 只不过我们平时都把后面的这个垂直半径给省略了. 圆角也有连写的方法 border-radius: 左上角  右上角  右下角  左下角;