举报投诉联系我们 手机版 热门标签 编程学
您的位置:编程学 > css里box-shadow属性 CSS3 box-pack 属性

css里box-shadow属性 CSS3 box-pack 属性

2023-04-13 02:18 CSS参考手册

css里box-shadow属性 CSS3 box-pack 属性

css里box-shadow属性

box-shadow属性是CSS3中的一个新属性,它可以给元素添加阴影效果。它可以让元素看起来更加立体,也可以用来制作一些特殊的效果。

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

box-shadow属性有6个参数,分别是水平阴影位置h-shadow、垂直阴影位置v-shadow、模糊距离blur、扩展距离spread、颜色color和内外阴影inset。

h-shadow和v-shadow用来定义阴影的位置,如果想要使元素有上方的阴影,就将h-shadow设为0px,v-shadow设为5px即可。blur用来定义阴影的模糊度,spread用来定义阴影的扩展度,color用来定义阴影的颜色,inset用来定义是内部还是外部的阴影。

box-shadow: 0px 5px 10px 5px #ccc;

上述代码表明了一个元素有上方5px的外部10px模糊度5px扩展度#ccc浅灰色的阴影效果。通过不同参数的不同设定,我们可以得到不同样式的box shadow效果。

CSS3 box-pack 属性

CSS 参考手册

实例

通过一起使用 box-align 和 box-pack 属性,对 div 框的子元素进行居中:

div
{
width:350px;
height:100px;
border:1px solid black;


display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;


display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;


display:box;
box-pack:center;
box-align:center;
}

亲自试一试

浏览器支持

目前没有浏览器支持 box-pack 属性。

Firefox 支持替代的 -moz-box-pack 属性。

Safari、Opera 以及 Chrome 支持替代的 -webkit-box-pack 属性。

定义和用法

box-pack 属性规定当框大于子元素的尺寸,在何处放置子元素。

该属性规定水平框中的水平位置,以及垂直框中的垂直位置。

默认值: start
继承性: no
版本: CSS3
JavaScript 语法: object.style.boxPack="center"

语法

box-pack: start|end|center|justify;
描述 测试
start

对于正常方向的框,首个子元素的左边缘被放在左侧(最后的子元素后是所有剩余的空间)

对于相反方向的框,最后子元素的右边缘被放在右侧(首个子元素前是所有剩余的空间)

测试
end

对于正常方向的框,最后子元素的右边缘被放在右侧(首个子元素前是所有剩余的空间)。

对于相反方向的框,首个子元素的左边缘被放在左侧(最后子元素后是所有剩余的空间)。
测试
center 均等地分割多余空间,其中一半空间被置于首个子元素前,另一半被置于最后一个子元素后 测试
justify 在每个子元素之间分割多余的空间(首个子元素前和最后一个子元素后没有多余的空间)。 测试

CSS 参考手册

阅读全文
以上是编程学为你收集整理的css里box-shadow属性 CSS3 box-pack 属性全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
© 2024 编程学 bianchengxue.com 版权所有 联系我们
桂ICP备19012293号-7 返回底部