box-shadow实现outline圆角

如border有border-radius
outline也有outline-radius
但是目前outline-radius只在火狐上有用
其他浏览器都不支持。

-moz-outline-radius: 30px;

目前可以使用box-shadow来模拟outline圆角效果

border-radius: 30%;
border: 5px solid red;
box-shadow: 0 0 0 5px darkorange;

单层

加多几层

border-radius: 30%;
border: 5px solid red;
box-shadow: 0 0 0 5px darkorange,
             0 0 0 10px darkmagenta,
              0 0 0 15px darkcyan,
               0 0 0 20px darksalmon;

多层

<!DOCTYPE html> <html> <style> .slickButton3 { margin-right:20px; margin-left:20px; margin-top:20px; margin-bottom:20px; color: white; font-weight: bold; padding: 10px; border: solid 1px black; background: #111111; cursor: pointer; transition: box-shadow 0.5s; -webkit-transition: box-shadow 0.5s; } .slickButton3:hover { box-shadow:4px 4px 8px #00FFFF; } img { position:absolute; left:20px; top:0px; } p { cursor: default; } .input{ border: 1px solid #ccc; padding: 7px 0px; border-radius: 3px; padding-left:5px; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); box-shadow: inset 0 1px 1px rgba(0,0,0,.075); -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s } .input:hover{ border-color: #808000; box-shadow: 0px 0px 8px #7CFC00; } </style> <head> <meta charset="UTF-8"> <title>用户登陆</title> </head> <body background="./image/background.jpg" style="background-repeat:no-repeat ;background-size:100% 100%; background-attachment: fixed;" > <form action="check.php" method="GET"> <div> </br></br></br></br> <p style="font-family:arial;color:white;font-size:20px;text-align:center;font-family:KaiTi;">我是cl4y,是一个WEB开发程序员,最近我做了一个网站,快来看看它有多精湛叭!</p> </br></br></br></br></br></br></br> <p style="font-family:arial;color:white;font-size:20px;text-align:center;">用户名:</p> <div align="center"><input type="text" name="username" style="text-align:center;" class="input" /></div> <p style="font-family:arial;color:white;font-size:20px;text-align:center;">密 码:</p> <div align="center"><input type="text" name="password" style="text-align:center;" class="input" /></div> <div align="center"> <input type="submit" value="登录" class="slickButton3"> </div> </div> </form> <div style="position: absolute;bottom: 0;width: 99%;"><p align="center" style="font:italic 15px Georgia,serif;color:white;"> Syclover @ cl4y</p></div> </body>
最新发布
11-11
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值