零基础建站培训介绍

当前位置:

CSS如何设置DIV边框阴影和图片阴影效果

在CSS中可以控制DIV的边框产生阴影效果,达到立体感.也可以给图片添加阴影,使整个网站版面更加美观.220026i8or2bnuynoy787n

CSS设置阴影效果的样式为box-shadow属性,使用方法:
边框设置阴影效果:

div{box-shadow:3 4 1px #000 inset;}

图片设置阴影效果:

img {box-shadow:5px 2px 6px #000}

参数说明:
第1个值为0时,代表左右边框阴影 为1px范围 ;
第1个值为正整数 代表 左边框阴影 ;
第1个值为负整数 代表 右边框阴影 ;
第2个值为0 代表上下边框阴影 ;
第2个值为正整数 代表1px阴影距离上边框多少;
第2个值为负整数 代表下边框阴影;
有inset 代表框内阴影 ,不带inset 代表框外阴影;

上一课: 下一课:

发表评论

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

相关教程

  • Part I 这种选择器的共同特征:指定的样式只有当元素处于某种状态时才起作用,在默认状态下不起作用CSS3中共有11种UI元素状态伪类选择器:E:hover 
  • 代码介绍:一款CSS3设计的绿色扁平化简洁清爽风格鼠标悬停动画切换网站导航菜单代码特效。代码适用:适用浏览器:360、FireFox、Chrome、Safari、
  • 背景样式在制作网站过程中经常使用到。以下是CSS background 背景样式经常使用到的几种样式:背景属性以及背景位置的控制:1、background-position
  • 1、CSS3设置文字一个阴影在CSS3中使用text-shadow属性来给文字添加阴影效果h1{text-shadow: 5px 5px 5px #FF0000;}语法解释:值描述
  • *{margin: 0; padding: 0}的作用*{margin: 0; padding: 0}作用是Reset(重置)浏览器默认样式,对于各浏览器样式统一的话有着简单粗暴的效果。* 这
  • 在自己建网站时,CSS是控制网站各类样式的文件,CSS全部是英文,为了方便学建网站新手使用CSS,下面是学做网站论坛总结的常用CSS英文汉语词汇对照表.
  • 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现。同时不用图片做背景,直接使用背景色实现,鼠标经过悬停对应栏目名称是对应背景蓝色变
  • 在网页制作和网站开发过程中,网页上使用的字体往往由于浏览者电脑中没有相应的字体,达不到我们设计的效果。为了解决这个问题,我们可以直接使用我们
  • CSS3常用属性手册 (144443 次学习)
    CSS3新增选择器有哪些:https://www.xuewangzhan.net/baike/css3-232.html  CSS3中的transform 变形功能:transform:rotate():旋转  t
  •  column-count属性:column-count将 div 元素中的文本分为几列显示,常用于文章进行分列阅读。缺点是几列的宽度是一样的div{-moz-column-count: