HTML5 09 圆角和阴影

来源：互联网发布：外国人在淘宝买东西吗编辑：程序博客网时间：2024/06/01 07:44

</pre><pre name="code" class="html"><!doctype html><html><head><meta charset="utf-8" /><style>div{width:180px;height:80px;border:2px solid red;padding:10px;border-radius:20px;/*设定一个值会同时设定四个角的圆角成都*//*如果圆角的半径相同，每个值可以只写一个参数,X相当于写2个一样的参数 例如 30px/30px 和30px 是等同的*/}</style></head><body><div>圆角属性设定方法---圆角边框</div></body></html>

<!doctype html><html><head><meta charset="utf-8" /><style>div{width:200px;height:100px;border:2px solid red;border-radius:100px/50px}</style></head><body><div>圆角属性设定方法---椭圆边框</div></body></html>

<!doctype html><html><head><meta charset="utf-8" /><style>div{width:200px;height:100px;border:2px solid red;border-top-right-radius:100px 50px;/*右上角*/border-bottom-right-radius:100px 50px/*右下角*/}</style></head><body><div>圆角属性设定方法---子弹头边框</div></body></html>

<!doctype html><html><head><meta charset="utf-8" /><style>div{width:200px;height:200px;border:2px solid red;border-radius:100px;/*border-radius:100px/100px;该方式也可以*/}</style></head><body><div>圆形</div></body></html>

<!DOCTYPE HTML><html><head><meta charset="utf-8" /><style>#yuan{width:96px;height:48px;border-top:2px solid red;border-right:2px solid red;border-bottom:50px solid red;border-left:2px solid red;border-radius:100px;/*备注：圆角的半径大于等于矩形半径，默认都是圆形的  本例中使用50px和100px效果相同*/}</style></head><body><div id="yuan"></div></body></html>

<!DOCTYPE HTML><html><head><meta charset="utf-8" /><style>#yuan{width:100px;height:50px;border-top:2px solid red;border-right:2px solid red;border-bottom:50px solid red;border-left:2px solid red;border-radius:100px;position:relative;/*设置为对象的参照物*/}#yuan::after{content:'';width:10px;height:10px;border:20px solid red;position:absolute;left:0px;top:25px;border-radius:50px;background:#fff; }#yuan::before{content:'';width:10px;height:10px;border:20px solid #FFF;position:absolute;right:0px;top:25px;border-radius:50px;background:red;}</style></head><body><div id="yuan"></div></body></html>

<!doctype html><html><head><style>img{margin:400px;/*-webkit-box-reflect:above;设置倒影在盒子的上方*/-webkit-box-reflect:below;/*设置倒影在盒子的下方*//*-webkit-box-reflect:left;设置倒影在盒子的左方*//*-webkit-box-reflect:right;设置倒影在盒子的左方*/}</style></head><body><img src="./goddess/goddess_heart.jpg"></body></html>

<!doctype html><html><head><style>img{margin:200px;-webkit-box-reflect:right 100px/*第二个参数用于设定倒影和原盒子模型之间的距离，可以为负数*/}</style></head><body><img src="./goddess/goddess_heart.jpg"></body></html>

<!doctype html><html><head><style>p{font-size:36px;-webkit-box-reflect:below 2px -webkit-linear-gradient(top,transparent,transparent 50%,#FFF);}</style></head><body><p>锄禾日当午</p><p>汗滴禾下土</p><p>谁知盘中餐</p><p>粒粒皆辛苦</p><p>当午，汗滴和下土，盘中餐和粒粒</p></body></html>

<!doctype html><html><head><style>img{margin:100px;-webkit-box-reflect:below 10px -webkit-linear-gradient(top,transparent,#FFF) }</style></head><body><img src="./goddess/goddess_eye.jpg" /></body></html>

<!doctype html><html><head><meta charset="UTF-8" /><style>div{margin:100px;width:200px;height:100px;background:#ccc;}#left-top{-webkit-box-shadow:-10px -10px;/*实验性质的浏览器写法*/box-shadow:-10px -10px;/*实现W3C的标准*/}#right-top{box-shadow:10px -10px;}#right-bottom{box-shadow:10px 10px;}#left-bottom{box-shadow:-10px 10px;}#rouhe{box-shadow:10px 10px 10px;}#color{box-shadow:10px 10px 10px #ABCDEF}</style></head><body><div id="left-top">left-top</div><div id="right-top">right-top</div><div id="right-bottom">right-bottom</div><div id="left-bottom">left-bottom</div><div id="rouhe">柔和属性</div><div id="color">彩色阴影</div></body></html>

<!doctype html><html><head><meta charset="UTF-8" /><style>.button{width:200px;height:100px;background:#CCC;box-shadow:5px 5px;font-size:30px;line-height:100px;text-align:center;}</style></head><body><div class="button">这就是爱</div><script>//选中页面中的元素var button=document.getElementsByTagName('div')[0];//注册事件（按下鼠标事件）button.onmousedown=function(){//修改阴影效果this.style.boxShadow='5px 5px inset';//修改文字效果this.style.lineHeight='90px';}//注册事件(松开鼠标事件)button.onmouseup=function(){this.style.boxShadow='5px 5px';this.style.lineHeight='100px';}//注册事件(鼠标移出事件)button.onmouseout=function(){this.style.boxShadow='5px 5px';this.style.lineHeight='100px';}</script></body></html>

<!doctype html><HTML><head><meta charset="utf-8" /><style>.multiple{margin:200px;width:200px;height:100px;background:#ccc;box-shadow:0px 0px 10px 10px red,/*赤色阴影*/0px 0px 10px 20px orange,/*橙色阴影*/0px 0px 10px 30px yellow,/*黄色阴影*/0px 0px 10px 40px green,/*绿色阴影*/0px 0px 10px 50px cyan,/*青色阴影*/0px 0px 10px 60px blue,/*蓝色阴影*/0px 0px 10px 70px purple;/*紫色阴影*/}</style></head><body><div class="multiple"></div></body></HTML>

0 0