border-radius：允许向元素添加圆角
<style type="text/css">
#r1{
border-radius:25px;
background:blue;
padding:20px;
width:200px;
height:150px;
}
#r2{
border-radius:25px;
border:2px solid green;
padding:20px;
width:200px;
height:150px;
}
#r3{
border-radius:25px;
background:url("img/1.jpg");
background-position:left top;
background-repeat:repeat;
padding:20px;
width:200px;
height:150px;
}
</style>
</head>
<body>
<form action="" id="myform" >
<p>border-radius </p>
<p>指定背景颜色圆角</p>
<p id="r1">圆角</p>
<p>指定边框元素圆角</p>
<p id="r2">圆角</p>
<p>指定背景图片圆角</p>
<p id="r3">圆角</p>
</form>
</body>
box-shadow：阴影
<style type="text/css">
#div1{
width:200px;
height:100px;
background:yellow;
box-shadow:10px 10px 5px 5px gray;/* 阴影*/
}
#div2{
width:200px;
height:100px;
background:yellow;
box-shadow:10px 10px 5px 5px inset;/* 阴影 inset内阴影*/
}
</style>
</head>
<body>
<div id="div1">
外阴影
</div>
<div id="div2">
内阴影
</div>
</body>
设置多层阴影
box-shadow:10px 10px 5px 5px gray,15px 15px 5px 5px blue,20px 20px 5px 5px gray;/* 多层阴影*/
border-image属性用于设置图片边框
<style type="text/css">
div{
width:250px;
padding:10px 20px;
border:15px solid transparent;
}
#round{
-webkit-border-image:url("img/1.jpg") 30 30 round; /* -webkit是google浏览器内核支持所需要 ,round是平铺的意思*/
-o-border-image:url("img/1.jpg")30 30 round;/* -o是Opera浏览器内核支持所需要的前缀*/
border-image:url("img/1.jpg")30 30 round;
}
#stretch{
-webkit-border-image:url("img/1.jpg") 30 30 stretch; /* -webkit是google浏览器内核支持所需要 stretch是拉伸 */
-o-border-image:url("img/1.jpg")30 30 stretch;/* -o是Opera浏览器内核支持所需要的前缀*/
border-image:url("img/1.jpg")30 30 stretch;
}
</style>
</head>
<body>
<p>border-image属性用于设置图片的边框</p>
<div id="round">
这里图像平铺来填充该区域
</div>
<br>
<div id="stretch">
这里图片拉伸以填充该区域
</div>
<p>这里是我们使用的图片素材</p>
<img src="img/1.jpg">
时间： 2024-10-14 03:23:31