边框阴影box-shadow

边框的阴影:

参数说明:

box-shadow:1px 2px 3px 4px #ccc inset;

1px  从原点开始,沿x轴正方向的长度(倘若为负值,为沿x轴负方向的长度)

2px  从原点开始,沿y轴正方向的长度;(倘若为负值,为沿y轴负方向的长度)

3px  阴影的模糊度,只允许为正值

4px  阴影扩展半径

#ccc  阴影颜色

 inset  设置为内阴影(如果不写这个值,默认为外阴影)

  

说明

1. 对于上边,沿x轴方向的偏移量显然没有意义,设为0px;

2. 沿y轴正方向阴影进入div内部,不显示,因此写为负数;

3. 扩展半径不要写,或者写成0px,这样就不会影响其他的边;

4. 颜色自定;

5. 模糊程度按需要自定;

6. 下、左、右边阴影按规律类推。

css部分

 box-shadow:    0px -10px 0px 0px #ff0000,   /*上边阴影  红色*/

                -10px 0px 0px 0px #3bee17,   /*左边阴影  绿色*/

                10px 0px 0px 0px #2279ee,    /*右边阴影  蓝色*/

                0px 10px 0px 0px #eede15;    /*下边阴影  黄色*/

  

例子:

demo.css

#box{
    width:200px;
    height:200px;
    margin:30px auto;
    text-align: center;
    color:seagreen;
    font-size: 26px;
    line-height: 200px;
    background: yellowgreen;
    border:2px solid darkslategray;
    box-shadow: 0px -10px 0px 0px #ff0000,
    			-10px 0px 0px 0px #3bee17,
    			10px 0px 0px 0px #2279ee,
    			0px 10px 0px 0px #eede15;
}

  

html部分:

<div id="box">
    边框阴影
</div>

  

效果:

ok,就到这里

原文地址:https://www.cnblogs.com/1906859953Lucas/p/9806241.html

时间: 2024-10-30 12:08:58

边框阴影box-shadow的相关文章

css边框阴影

<style type="text/css">.mydiv{width:250px;height:auto;border:#909090 1px solid;background:#fff;color:#333;filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=4);/*ie*/-moz-box-shadow: 2px 2px 10px #909090;/

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-shadow

CSS3之box-shadow边框阴影 div{box-shadow: 10px 10px 5px #888888;} 来自为知笔记(Wiz)

CSS3边框阴影

CSS3边框阴影实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS3边框阴影</title> <style>  div { width:300px; height:100px; background-color:#ff9900; -moz-box-shadow: 5px 5px 5px #888888; /* 老的 Fi

swift UI专项训练36 ImageVi图片边框阴影

ImageView是我们经常用到的组件,但是我们发现storyboard中图片的属性编辑器中没有对于图片边框的设计.在view中添加一张普通的图片,效果是这样的: 可以看到,白色背景上的深色图片,效果总是有点突兀,我们想要加一个阴影边框来过渡一下图片和背景,打开图片所属的控制器代码,类中所显示的图片名为image,现在来设置它的边框.在viewDidLoad中输入以下代码: image.layer.backgroundColor = UIColor.orangeColor().CGColor i

CSS入门(css简介与样式汇总、CSS的使用方式、CSS样式表的特征、CSS基础选择器和复杂选择器、边框阴影)

一.CSS的作用 1.以统一的方式实现样式的定义 2.提高页面样式的可重用性和可维护性 3.实现了内容(HTML)和表示(CSS)的分离 HTML和CSS之间有什么关系? HTML:构建网页的结构 CSS :构建HTML元素的样式 样式汇总: color:red 字体颜色 font-size:字体大小 font-family:字体样式 background-color 背景颜色 width:宽度 height:高度 字体使用实例(样式) font-family:字体的种类 font-size:字

CSS3(1)---圆角边框、边框阴影

CSS3(1)---圆角边框.边框阴影 CSS3可以简单理解成是CSS的增强版,它的优点在于不仅有利于开发与维护,还能提高网站的性能. 一.圆角边框 圆角在实际开放过程中,还是蛮常见的.以前基本是通过背景图片做的,有了CSS3后可以使用简单的属性搞定,可以通过border-radius设置元素的圆角半径. 1.圆角边框语法 圆角边框属性 : border-radius 属性值 border-radius: 属性1,属性2,属性3,属性4 # 四个值:第一个值为左上角,第二个值为右上角,第三个值为

边框阴影

<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>边框阴影</title> <style> .test { width: 200px; height: 200px; margin: 20px auto; line-height: 200px; text-align: center; backgr

box shadow 单边阴影 两边阴影

box-shadow语法:x轴偏移值 y轴偏移值 模糊半径 阴影半径 || 颜色 insect,其中阴影半径可以为负值,意思是增加或减少指定数值的阴影半径 正常阴影 box-shadow: 5px 5px 5px black; 阴影半径为负值  box-shadow: 5px 5px 5px -5px black; 阴影半径为正值 box-shadow: 5px 5px 5px 5px black; 双边阴影 box-shadow: 5px 0px 5px -5px black, -5px 0p