使用css自制元素模型与div阴影框

最新推荐文章于 2024-03-23 23:56:18 发布

小腦萀

最新推荐文章于 2024-03-23 23:56:18 发布

阅读量152

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/fffffcc/article/details/106579208

版权

display:box;box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。
目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(-moz-)、opera(-o-)、chrome/safari（-webkit-)。

-moz-box-shadow:0 0 1em gold;/*box-shadow设置添加边框阴影效果为gild金色*/
-ms-overflow-x: scroll;/*溢出元素的内容区域提供y轴scroll滚动机制*/
overflow-y: scroll;/*裁剪内容-提供y轴滚动机制*/
 -ms-overflow-y: auto;/*溢出元素的内容区域提供y轴auto滚动机制*/
 overflow-y: auto;/*如果溢出框，则应该提供y轴滚动机制*/

使用 overflow-y 属性来确定对上/下边缘的裁剪。

完整案例代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width:600px;
height:30px;
padding:20px;
margin-top:30px;
margin-left:30px;
border:1px dashed #930;/*设置div边框为虚线型*/
text-align:center;
font-weight:bolder;
color:black;
}
.s1{
-moz-box-shadow:0 0 1em gold;/*box-shadow设置添                                              加边框阴影效果为gold金色*/
-webit-box-shadow:0 0 1em gold;
box-shadow:0 0 1em gold;
-ms-overflow-x: scroll;/*溢出元素的内容区域提供x轴                                             scroll滚动机制*/
  overflow-x: scroll;/*裁剪内容-提供x轴滚动机制*/
}
.s2{
-moz-box-shadow:20px -16px teal;/*设置添加边框阴影                                                          效果为teal茶色*/
-webkit-box-shadow:20px -16px teal;
box-shadow:20px -16px teal;
-ms-overflow-x: auto;/*溢出元素的内容区域提供x轴auto滚                                     动机制*/
         overflow-x: auto;/*如果溢出框，则应该提供x轴滚动机制*/
}
.s3{
-moz-box-shadow: 3px 3px red, -1em 0 0.4em #00F;
-webkit-box-shadow: 3px 3px red, -1em 0 0.4em #00F;
box-shadow: 3px 3px red, -1em 0 0.4em #00F;
 -ms-overflow-x: scroll;/*溢出元素的内容区域提供y轴 
scroll滚动机制*/
         overflow-y: scroll;/*裁剪内容-提供y轴滚动机制*/
}
.s4{
 -moz-box-shadow: 0 0 3em pink inset;
         -webkit-box-shadow: 0 0 3em pink inset;
        box-shadow: 0 0 3em pink inset;
-ms-overflow-y: auto;/*溢出元素的内容区域提供y轴                                             auto滚动机制*/
         overflow-y: auto;/*如果溢出框，则应该提供y轴滚动机制*/
}
</style>
</head>
<body>
<div class="s1">将元素的标签内容嵌入显示区域，显示水平滚动条， 但视情况显示可滚动或不可滚动cccccccccccccccccccccccccccccccccccccccccccccccccccccc</div>
<div class="s2">将元素的标签内容嵌入显示区域，并视情况自动显示水平滚动条ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc</div>
<div class="s3">家主流浏览器支持的属性加以介绍。
尽管CSS3新增了相当多的属性，但毕竟CSS3版本仍只是草案阶段， 很多属性各家主流浏览器不见得都支持，因此，本书将针对CSS3 新增（或变更）而且当前至少有一家主流浏览器支持的属性加以介绍。</div>
<div class="s4">家主流浏览器支持的属性加以介绍。
尽管CSS3新增了相当多的属性，但毕竟CSS3版本仍只是草案阶段， 很多属性各家主流浏览器不见得都支持，因此，本书将针对CSS3 新增（或变更）而且当前至少有一家主流浏览器支持的属性加以介绍。</div>
</body>
</html>

效果图如下：

在这里插入图片描述

小腦萀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用css自制元素模型与div阴影框

display:box;box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(-moz-)、opera(-o-)、chrome/safari（-webkit-)。-moz-box-shadow:0 0 1em gold;/*box-shadow设置添加边框阴影效
复制链接

扫一扫