border-radius属性
border-radius属性是一个简写属性,用于设置border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius,其顺序也是如此。
也可以设置border-radius: 1-4 length|% / 1-4 length|%;或border-radius:length|%。
<style>
.div1{
width:300px;
height:300px;
background-color:red;
margin:0 auto;
border-radius:50% 50% 50% 50% / 65% 65% 35% 35%;
}
.div2{
width:300px;
height:300px;
background-color:red;
margin:0 auto;
border-radius:50% / 35%;
}
</style>
<div class="div1"></div>
<div class="div2"></div>
box-shadow属性
box-shadow: h-shadow v-shadow blur color inset;
第一个参数 x-offset偏移(允许负值)
第二个参数 y-offset偏移(允许负值)
第三个参数 模糊度
第四个参数 颜色
第五个参数 内阴影 inset(不设置时默认为outset外阴影)
text-shadow属性
text-shadow: h-shadow v-shadow blur color;
第一个参数 x-offset偏移(允许负值)
第二个参数 y-offset偏移(允许负值)
第三个参数 模糊度
第四个参数 颜色
<style>
div{
width:300px;
height:300px;
background-color:green;
margin:0 auto;
box-shadow:3px 3px 4px black;
font-size:50px;
color:black;
text-shadow:2px 2px 2px gold;
}
</style>
<div>我是div,我是文字</div>
效果如下:
