首页 > web前端 > css教程 > css3的弹性盒怎么做出来

css3的弹性盒怎么做出来

php中世界最好的语言
发布: 2017-11-24 11:52:41
原创
2170 人浏览过

有时候我们需要在CSS3里写一个弹性盒子,那么这个代码怎么做出来呢?这就需要用到我们的box-shadow属性了,他可以让盒子在显示的时候产生阴影效果,下面就给大家详细的说明一下

写法:

       box-shadow:length length length color;

第一个参数表示阴影离开盒子的横向距离

第二个参数表示阴影离开盒子的纵向距离

第三个参数表示阴影的模糊半径

第四个参数表示阴影的颜色

对盒子内元素使用阴影

       可以单独对盒子内的子元素使用阴影。

可以使用first-letter选择器或者first-line选择器来只让第一个文字或者第一行具有

阴影效果

表格及单元格使用阴影

       可以使用box-shadow属性让表格及表格内的单元格产生阴影效果。

指定针对元素的宽度与高度的计算方法

        在css3中,使用box-sizing属性来指定针对元素的宽度与高度的计算方法

box-sizing属性

      在css中,使用width属性和height属性来指定元素的宽度和高度。

但是使用box-sizing属性,可以指定用width属性和height属性分别指定的宽度和

高度值是否包含元素内部的补白区域,以及边框的宽度和高度。

     可以给box-sizing属性指定的属性值为content-box属性值与border-box属性值。前者表示元素的宽度与高度不包括内部补白区域,以及边框的宽度与高度

,后者表示元素的宽度与高度包括内部补白区域,以及边框的宽度与高度。

以前默认的是使用content-box属性值。

另外,可以在box-sizing属性中指定属

性值为padding-box,即指定的宽度与

高度内容包括内容的宽度与高度和内

部补白区域的宽度和高度,不包括边

框的宽度与高度

使用的目的是控制元素的总宽度,如果不使用该属性,样式中默认的使用的

是content-box属性值,它只针对内容的宽度做了一个指定,却没有对元素的

总宽度进行指定。

有些场合下利用border-box属性值会使得页面布局更加方便。

例,只要将两个div元素的border-box属性值都设定为50%,就可以确保两个div

元素并列显示了。

这就是弹性盒的做法了,更多精彩请关注php中文网其它相关文章!

相关阅读:

html里怎么插入图片

html里div居中需要注意哪些

html里的if注释怎么使用

以上是css3的弹性盒怎么做出来的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板