使文字在div中水平和垂直居中的的css样式为,四个边分别设置阴影样式

text-align:center; /*水平居中*/
line-height: 20px; /*行距设为与div高度一致*/

HTML元素

<div>水平垂直居中</div>

css样式

div{
    width:200px;height:200px;  /*设置div的大小*/
    border:1px solid green;    /*边框*/
    text-align: center;        /*文字水平居中对齐*/
    line-height: 200px;        /*设置文字行距等于div的高度*/
    overflow:hidden;
}

div四个边框分别设置阴影样式

对于div边框的阴影一直没有很好地理解,也一直不明白怎么给四个边框分别设置阴影。昨天项目中碰到了这个问题,就认真想了一下,在此总结一二。

首先,还是从官方解释说起。

网上的解释通常都是什么水平阴影长度、垂直阴影长度,略抽象。根据我的实验和理解,从坐标层面来理解比较直观,那么我们首先建立如下直角坐标系:(突然发现我的电脑上竟然没有装Visio,现学现卖用PS临时画了一个,原谅我)

OK。原点为基点,原点左侧为x轴负方向,值为负,右侧为正;原点下方为y轴正方向,值为正,上方为负。如上图箭头所指。好理解吗?不要嫌我啰嗦,正确理解坐标方向对于理解阴影画法至关重要。

好了,上代码。官方用语:     box-shadow:1px 2px 3px 4px #ccc inset;

来分别看一下以上六个值的含义: 1px  从原点开始,沿x轴正方向的长度(倘若为负值,为沿x轴负方向的长度);

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

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

                   4px  阴影扩展半径;

                   #ccc  阴影颜色;

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

我们再详细点说,所谓内外阴影,其实就是指的是阴影在div的外面一圈还是在div的里面一圈,如下图:

外阴影                          内阴影

铺垫完毕,说正事——给四条边分别加阴影。

如果打算添加外部阴影,那么在div内部是不会显示阴影的。看起来好像是废话,来仔细分析一下。

将div放在直角坐标系中,则div上边与x轴重合,左边与y轴重合,没错吧。所以,对于上面一条边,沿y轴正方向的阴影不会显示,因为沿y轴正方向的长度已经进入到了div内部。同样的,对于左侧边框,沿x轴正方向的长度也进入到了div内部,阴影不会显示。

对于右侧边框,则沿x轴负方向的长度不显示(不要纠结于原点位置,只考虑坐标方向。可以看做右边与y轴重合,方便理解);对于下方边框(看做下边与x轴重合),沿y轴负方向的长度进入div内部,不显示。

好吧,我的语言组织能力有待加强。将以下代码配上这一段的文字描述,就不难理解了。

/*说明:(以上部边为例进行说明)
1. 对于上边,沿x轴方向的偏移量显然没有意义,设为0px;2. 沿y轴正方向阴影进入div内部,不显示,因此写为负数;3. 扩展半径不要写,或者写成0px,这样就不会影响其他的边;4. 颜色自定;5. 模糊程度按需要自定;6. 下、左、右边阴影按规律类推。
*/
 box-shadow:    0px -10px 0px 0px #ff0000,   /*上边阴影  红色*/
                -10px 0px 0px 0px #3bee17,   /*左边阴影  绿色*/
                10px 0px 0px 0px #2279ee,    /*右边阴影  蓝色*/
                0px 10px 0px 0px #eede15;    /*下边阴影  黄色*/

效果图:

外阴影加好了。倘若是内阴影,可以按这个规律自己推一下

时间: 2024-10-12 15:58:56

使文字在div中水平和垂直居中的的css样式为,四个边分别设置阴影样式的相关文章

div四个边框分别设置阴影样式

对于div边框的阴影一直没有很好地理解,也一直不明白怎么给四个边框分别设置阴影.昨天项目中碰到了这个问题,就认真想了一下,在此总结一二. 首先,还是从官方解释说起. 网上的解释通常都是什么水平阴影长度.垂直阴影长度,略抽象.根据我的实验和理解,从坐标层面来理解比较直观,那么我们首先建立如下直角坐标系:(突然发现我的电脑上竟然没有装Visio,现学现卖用PS临时画了一个,原谅我) OK.原点为基点,原点左侧为x轴负方向,值为负,右侧为正:原点下方为y轴正方向,值为正,上方为负.如上图箭头所指.好理

文字在div中垂直居中的方法,设置div的高度height和行高line-height一致

文字在div中垂直居中的方法,设置div的高度height和行高line-height一致,如 .containerdiv{ height:60px; line-height:60px; }

未知行数的文字在div中垂直居中

今天工作中遇到一个问题,就是未知行数的文字在div中怎么垂直居中,如下面的3个图: 图1 图2 图3 图1是2行文字的效果,图2是不经过css垂直居中处理的效果,图3是经过css垂直居中后的效果,html代码如下:(经测试,除了IE7,其他浏览器都成功的垂直居中了) <div class="m"><div class="m1"><div class="m2">南京证券股份业部份业部</div><

div中的内容垂直居中实例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">           <head>         <title>   

[转]如何让div中的内容垂直居中

转自:http://blog.163.com/yan_1990/blog/static/197805107201211311515454/ 虽然Div布局已经基本上取代了表格布局,但表格布局和Div布局仍然各有千秋,互有长处.比如表格布局中的垂直居中就是Div布局的一大弱项,不过好在千变万化的CSS可以灵活运用,可以制作出准垂直居中效果,勉强过关. 要让div中的内容垂直居中,无非有以下几种方法,等我一一列举: 一.行高(line-height)法如果要垂直居中的只有一行或几个文字,那它的制作最

如何让div中的内容垂直居中(转)

虽然Div布局已经基本上取代了表格布局,但表格布局和Div布局仍然各有千秋,互有长处.比如表格布局中的垂直居中就是Div布局的一大弱项,不过好在千变万化的CSS可以灵活运用,可以制作出准垂直居中效果,勉强过关. 如何让div中的内容垂直居中 来源:黄超 要让div中的内容垂直居中,无非有以下几种方法,等我一一列举: 一.行高(line-height)法 如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line

如何让div中的内容垂直居中

虽然Div布局已经基本上取代了表格布局,但表格布局和Div布局仍然各有千秋,互有长处.比如表格布局中的垂直居中就是Div布局的一大弱项,不过好在千变万化的CSS可以灵活运用,可以制作出准垂直居中效果,勉强过关. 要让div中的内容垂直居中,无非有以下几种方法,等我一一列举: 一.行高(line-height)法如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:30px; width:10

bobo 如何让div中的内容垂直居中

虽然Div布局已经基本上取代了表格布局,但表格布局和Div布局仍然各有千秋,互有长处.比如表格布局中的垂直居中就是Div布局的一大弱项,不过好在千变万化的CSS可以灵活运用,可以制作出准垂直居中效果,勉强过关. 要让div中的内容垂直居中,无非有以下几种方法,等我一一列举: 一.行高(line-height)法如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:30px; width:10

CSS总结div中的内容垂直居中的五种方法

文章目录 一.行高(line-height)法 二.内边距(padding)法 三.模拟表格法 四.CSS3的transform来实现 五:css3的box方法实现水平垂直居中 六:flex布局(2018/04/17补充) 一.行高(line-height)法 如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:30px; width:100px; overflow:hidden; } 这