学做网站培训课程介绍

当前位置:

CSS3 box-shadow 属性设置盒四周阴影

CSS是控制网页HTML的显示效果,在网站制作过程中可以通过CSS的box-shadow属性来控制盒阴影。(相关教程:html入门教程

语法:


box-shadow: h-shadow v-shadow blur spread color inset;

注意参数顺序不要乱写,尽量标准,多个阴影间,逗号隔开

另外还可以单独设置盒模型的四个边的阴影样式。


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

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

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

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

设置盒子四周阴影效果:


div{
    width:200px;
    height:200px;
    background:green;
    box-shadow:black 0px 0px 10px;//将颜色提到前面,且将h-shadow,v-shadow设为0px,实现四周阴影
}

效果如下:

CSS3盒阴影

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 什么是HTML属性每个HTML元素都可以给它添加一些属性,让它成为我们做网站时需要的样子。例如一段文字,我们可以给它添加属性,使这段文字变成红色,
  • 对于使用DEDECMS织梦建网站的同学们来说,网站优化时网站的图片ALT信息不可或缺。如果网站图片海量的话,手工的添加图片ALT信息费时费力。为
  • 通过网页制作教程上节课怎样在网页中添加表格,我们就可以在网页中插入一个表格,但往往插入的表格并不美观,我们需要设置一些表格参数去达到我们要求
  • 我们知道,网站伪静态可以形成静态页面,对于百度收录有着最大的好处。(相关知识:Discuz论坛后台SEO优化设置详细步骤)对于DISCUZ论坛程序实
  • CSS是控制网页HTML的显示效果,在网站制作过程中可以通过CSS的box-shadow属性来控制盒阴影。(相关教程:html入门教程)语法:[cce_html]box-sh
  • 有些网站的文字的后面或者下面都有阴影效果,这样使文字更有立体感。并且可以根据自己网站版面要求去设置阴影的颜色,离文字的距离,阴影范围的大小等
  • 切片的技巧(渐变、阴影、不规则) :渐变:可以单独拉一个切片阴影:网页中如何实现,css3也可以实现阴影但是ie6、ie8不支持,可以单独为阴