DAY 6 | 自学前端第六天

本文介绍了自学前端第六天的学习内容,包括CSS的圆角边框、盒子阴影、文字阴影和浮动。详细讲解了浮动布局的工作原理,如元素脱离标准流、一行内显示、行内块元素特性等,并探讨了浮动布局的注意事项和清除浮动的方法,如额外标签法、overflow属性及伪元素法。
摘要由CSDN通过智能技术生成

今天学习圆角边框、盒子阴影、文字阴影、CSS浮动。


圆角边框

1 参数值可以用 px 也可以用 %

 border-radius: 10px;
 <title>圆角边框</title>
    <style>
        div {
            width: 300px;
            height: 150px;
            background-color: pink;
            /* radius 是半径的意思,半径越大,弧度越大 */
            border-radius: 10px;
        }
    </style>
</head>

<body>
    <div></div>
</body>


2  border-radius: 50%;可以让盒子变成圆形或椭圆

 border-radius: 50%;


3  border-radius: 50px; 设置为盒子高度的一半,变成圆角矩形

.yuanju {
            width: 300px;
            height: 100px;
            background-color: pink;
            /* 圆角矩形设置为高度的一半 */
            border-radius: 50px;
        }


 3  border-radius:10px 6px 5px 10px; 顺时针左上,右上,右下,左下

 .shunshizhen {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 左上——右上——右下——左下 */
            border-radius: 10px 40px 5px 60px;

            /* 左上对角线10px,另外40px */
            /* border-radius: 10px 40px; */

            /* 分开写,格式按下面 */
            /* border-top-left-radius: 80px;
            border-top-right-radius: 60px;
            border-bottom-left-radius: 30px;
            border-bottom-right-radius: 50px; */
        }


盒子阴影

  box-shadow: 10px 10px 10px 10px red;

水平——垂直——模糊——模糊大小——模糊颜色——外部阴影还是内部 。

 注意:

  1. 默认外阴影(outset)但是不可以写这个单词,否则阴影无效
  2. 盒子阴影不占用空间,不会影响其他盒子排列
<title>盒子阴影</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            box-shadow: 20px 10px 10px 10px rgba(0, 0, 0, .3);

            /* 内阴影 */
            /* box-shadow: 20px 10px 10px 10px rgba(0, 0, 0, .3) inset; */

            /* 可以只写两个,水平和垂直阴影 */
            /* box-shadow: 20px 10px; */
        }
    </style>
</head>

<body>
    <div></div>
</body>

div:hover  原先盒子没有影子,当鼠标经过,就添加阴影效果:

 div:hover {
            box-shadow: 20px 10px 10px 10px rgba(0, 0, 0, .3);
        }


文字阴影

 text-shadow: 5px 5px 3px black;

水平——垂直——模糊程度——模糊颜色

  <title>文字阴影</title>
    <style>
        p {
            font-size: 20px;
            color: green;
            font-weight: 700;
            text-shadow: 5px 5px 3px black;
        }
    </style>
</head>

<body>
    <p>你是阴影,我是火影</p>
</body>


CSS浮动

  • 浮动

1 传统网页布局的三种方式:普通流(标准流)、浮动、定位。实际开发一个页面包含了这三种布局方式。

2 标准流:标签按照规定的默认方式排列。最基本的网页布局方式。块元素(div、hr、h、p、ul、ol、li、form、table)独占一行,从上到下;行内元素(span、a、i、em、strong)从左到右排列,碰到父元素边缘自动换行。

3 为什么需要浮动:很多布局方式,标准流无法实现,此时可以利用浮动完成布局,因为浮动可以改变元素标签默认的排列方式。典型应用:多个块级元素一行排列显示。网页布局准则:多个块级元素纵向排列标准流,多个块状元素横向排列找浮动。

 <title>浮动-行内块元素相邻缝隙</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: green;
            /* 相邻行内块之间有空隙 */
            /* display: inline-block; */
            f
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值