HTML5第六课时，盒子阴影和outline

最新推荐文章于 2024-09-01 07:20:59 发布

甲戌天火

最新推荐文章于 2024-09-01 07:20:59 发布

阅读量519

点赞数 1

分类专栏： HTML5

本文链接：https://blog.csdn.net/qq_36872096/article/details/70246132

版权

HTML5 专栏收录该内容

78 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>盒子阴影和outline</title>
    <style>
        #div1{
            width: 200px;
            height: 200px;
            background-color: #585858;
            margin-bottom: 10px;
            box-shadow: 5px 0 0 10px red;
    /*box-shadow:x方向的偏移  y方向的偏移  模糊的程度  模糊的范围大小  颜色*/
        }
        #in:focus{
            outline: none;/*去掉输入框当中，鼠标放在上面，框不变成蓝色*/

/*outline也可以改变属性，变成其他的颜色*/
        }        #div2{            width: 200px;            height: 200px;            margin-top: 10px;            background-color: #42668f;            outline: 3px solid #ff7300;/*边框线，跟border是一样的。*/        }    </style></head><body><div id="div1"></div><input id="in" type="text"  placeholder="请输入用户名"/><div id="div2"></div></body></html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

甲戌天火

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5第六课时，盒子阴影和outline

html>html>head lang="en"> meta charset="UTF-8"> title>盒子阴影和outlinetitle> style> #div1{ width: 200px; height: 200px; background-color: #585858;
复制链接

扫一扫