CSS学习165~188（圆角边框+浮动+清除浮动）

最新推荐文章于 2022-10-31 10:36:23 发布
最新推荐文章于 2022-10-31 10:36:23 发布
阅读量177 收藏
点赞数
分类专栏： HTML&CSS 文章标签： css 学习 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57809042/article/details/126853071
版权

4 圆角边框（重点）

在CSS3中,新增了圆角边框样式,这样我们的盒子就可以变圆角了。

border-radius属性用于设置元素的外边框圆角。

语法:

border-radius : length;

radius半径(圆的半径)原理: (椭)圆与边框的交集形成圆角效果

  • 参数值可以为数值或百分比的形式
  • 如果是正方形,想要设置为一个圆,把数值修改为高度或者宽度的一半即可,或者直接写为50%
  • 如果是个矩形，设置为高度的一半就可以做
  • 该属性是一个简写属性，可以跟四个值，分别代表左上角、 右上角、右下角、左下角
  • 分开写: border-top-left-radius、border-top-right-radius、border-bottom-right-radius和border-bottom-left-radius
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圆角边框常用写法</title>
    <style>
        .yuanxing {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* border-radius: 100px; */
            /* 50% 就是宽度和高度的一半 等价于100px */
            border-radius: 50%;
        }
        .juxing {
            width: 300px;
            height: 100px;
            background-color: pink;
            /* 圆角矩形设置为高度的一半 */
            border-radius: 50px;
        }
        .radius {
            width: 200px;
            height: 200px;
            /* border-radius: 10px 20px 30px 40px; */
            /* border-radius: 10px 40px; */
            border-top-left-radius: 10px;
            background-color: pink;
        }
    </style>
</head>
<body>
    1.圆形的做法：
    <div class="yuanxing"></div>
    2.圆角矩形的做法：
    <div class="juxing"></div>
    3.可以设置不同的圆角：
    <div class="radius"></div>
</body>
</html>

5 盒子阴影

CSS3中新增了盒子阴影,我们可以使用box-shadow属性为盒子添加阴影。

语法:

box-shadow: h-shadow v-shadow blur spread color inset;

在这里插入图片描述

注意:

  1. 默认的是外阴影(outset),但是不可以写这个单词，否则导致阴影无效
  2. 盒子阴影不占用空间,不会影响其他盒子排列。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子阴影</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            /* box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3); */
            /* box-shadow: 10px 10px */
        }
        div:hover {
            box-shadow: 10px 10px 10px -4px  rgba(0, 0, 0, .3);
        }
        /* 原先盒子没有影子，当我们鼠标经过盒子就添加阴影效果 */
    </style>
</head>
<body>
    <div></div>
</body>
</html>

6 文字阴影

在CSS3中，我们可以使用text- shadow属性将阴影应用于文本。

语法:

text- shadow: h-shadow v-shadow blur color;

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字阴影</title>
    <style>
        div {
            font-size: 50px;
            color: orangered;
            font-weight: 700;
            text-shadow: 5px 5px 6px rgba(0, 0, 0, .3);
        }
    </style>
</head>
<body>
    <div>
        你是阴影，我是火影
    </div>
</body>
</html>

1 浮动(float)

1.1 传统网页布局的三种方式

网页布局的本质-----用CSS来摆放子。把盒子摆放到相应位置

CSS提供了三种传统布局方式(简单说就是盒子如何进行排列顺序) :

  • 普通流(标准流)
  • 浮动
  • 定位

1.2 标准流（普通流/文档流）

所谓的标准流:就是标签按照规定好默认方式排列

  1. 块级元素会独占一行,从上向下顺序排列。
  • 常用元素:div、hr、p、h1~h6、ul、ol、dl、 form. table
  1. 行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行。
  • 常用元素: span、a、i、em等

以上都是标准流布局,我们前面学习的就是标准流,标准流是最基本的布局方式。

这三种布局方式都是用来摆放盒子的,盒子摆放到合适位置,布局自然就完成了。

注意:实际开发中,一个页面基本都包含了这三种布局方式，后面移动端学习新的布局方式)。

1.3 为什么需要浮动？

有很多的布局效果,标准流没有办法完成,此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式.

浮动最典型的应用:可以让多个块级元素一行内排列显示。

网页布局第一准则:多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动。

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行内块元素中间有缝隙</title>
    <style>
        div {
            width: 150px;
            height: 200px;
            background-color: pink;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</body>
</html>

1.4 什么是浮动？

float属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
语法:

选择器{ float: 属性值; }

在这里插入图片描述

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>什么是浮动</title>
    <style>
        .left,
        .right {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .right {
            float: right;
        }
    </style>
</head>
<body>
    <div class="left">左青龙</div>
    <div class="right">右白虎</div>
</body>
</html>

1.5 浮动特性（重难点）

  1. 加了浮动之后的元素,有很多特性要我们掌握的
  • 浮动元素会脱离标准流(脱标)
  • 浮动的元素会一行内显示并且元素顶部对齐
  • 浮动的元素会具有行内块元素的特性

设置了浮动(float)的元素最重要特性:

  1. 脱离标准普通流的控制(浮)移动到指定位置(动), (俗称脱标)
  2. 浮动的盒子不再保留原先的位置

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动特性-脱标</title>
    <style>
        .box1 {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .box2 {
            width: 300px;
            height: 300px;
            background-color: rgb(0, 153, 255);
        }
    </style>
</head>
<body>
    <div class="box1">浮动的盒子</div>
    <div class="box2">标准流的盒子</div>
</body>
</html>

最后效果
在这里插入图片描述

  1. 如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且对齐排列

注意:浮动的元素是互相贴靠在一起的(不会有缝隙),如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动特性-浮动盒子一行显示</title>
    <style>
        div {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .two {
            background-color: purple;
        }
        .four {
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div>1</div>
    <div class="two">2</div>
    <div>3</div>
    <div class="four">4</div>
</body>
</html>
  1. 浮动元素会具有行内块元素特性。

任何元素都可以浮动。不管原先是什么模式的元素,添加浮动之后具有行内块元素相似的特性。

  • 如果块级盒子没有设置宽度,默认宽度和父级一样宽,但是添加浮动后,它的大小根据内容来决定
  • 浮动的盒子中间是没有缝隙的，是紧挨着一起的
  • 行内元素同理
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动特性-浮动元素具有行内块元素特点</title>
    <style>
        /* 任何元素都可以浮动，不管原先是什么模式的元素，添加浮动之后具有行内块相似的特性。 */
        span,
        div {
            float: left;
            width: 200px;
            height: 100px;
            background-color: pink;
        }
        /* 如果行内元素有了浮动，则不需要转换块级 行内块元素就可以直接给高度和宽度 */
        p {
            float: right;
            height: 200px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <span>1</span>
    <span>2</span>

    <div>div</div>
    <p>p</p>
</body>
</html>

1.6 浮动元素经常和标准流父级搭配使用

为了约束浮动元素位置我们网页布局一般采取的策略是:
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置.符合网页布局第一准则.

浮动布局练习1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动元素搭配标准流父盒子1</title>
    <style>
        .box {
            width: 1200px;
            height: 460px;
            background-color: pink;
            margin: 0 auto;
        }
        .left {
            float: left;
            width: 230px;
            height: 460px;
            background-color: purple;
        }
        .right {
            float: left;
            width: 970px;
            height: 460px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left">左侧</div>
        <div class="right">右侧</div>
    </div>
</body>
</html>

最后效果：
在这里插入图片描述

浮动布局练习2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动布局练习2</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        .box {
            width: 1226px;
            height: 285px;
            background-color: pink;
            margin: 0 auto;
        }
        .box li {
            width: 296px;
            height: 285px;
            background-color: purple;
            float: left;
            margin-right: 14px;
        }
        /* 这里必须写 .box .last 要注意权重的问题 */
        .box .last {
            margin-right: 0;
        }
    </style>
</head>
<body>
    <ul class="box">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li class="last">4</li>
    </ul>
</body>
</html>

浮动布局练习3

网页布局第二准则：先设置盒子大小。之后设置盒子的位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动布局练习3</title>
    <style>
        .box {
            width: 1226px;
            height: 615px;
            background-color: pink;
            margin: 0 auto;
        }
        .left {
            float: left;
            width: 234px;
            height: 615px;
            background-color: purple;
        }
        .right {
            float: left;
            width: 992px;
            height: 615px;
            background-color: skyblue;
        }
        .right>div {
            float: left;
            width: 234px;
            height: 300px;
            background-color: pink;
            margin-left: 14px;
            margin-bottom: 8px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left">左青龙</div>
        <div class="right">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
        </div>
    </div>
</body>
</html>

最后效果：
在这里插入图片描述

2 常见网页布局

2.1 常见网页布局

在这里插入图片描述
在这里插入图片描述
eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常见网页布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        .top {
            height: 50px;
            background-color: gray;
        }
        .banner {
            width: 980px;
            height: 150px;
            background-color: gray;
            margin: 10px auto;
        }
        .box {
            width: 980px;
            height: 300px;
            margin: 0 auto;
            background-color: pink;
        }
        .box li {
            float: left;
            width: 237px;
            height: 300px;
            background-color: gray;
            margin-right: 10px;
        }
        .box .last {
            margin-right: 0;
        }
        /* 只要是通栏的盒子（和浏览器一样宽） 不需要指定宽度 */
        .footer {
            height: 200px;
            background-color: gray;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="top">top</div>
    <div class="banner">banner</div>
    <div class="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li class="last">4</li>
        </ul>
    </div>
    <div class="footer">footer</div>
</body>
</html>

最后效果：
在这里插入图片描述

2.2 浮动布局注意点

  1. 浮动和标准流的父盒子搭配。
    先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置
  2. 一个元素浮动了,理论上其余的兄弟元素也要浮动。
    一个盒子里面有多个子盒子,如果其中一个盒子浮动了,那么其他兄弟也应该浮动,以防止引起问题。
    浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>浮动注意点</title>
    <style>
        /* 如果一个子元素浮动了,尽量其他盒子也浮动,这样保证这些子元素一行显示 */
        .box {
            width: 900px;
            height: 300px;
            background-color: pink;
            margin: 0 auto;
        }
        .damao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: purple;
        }
        .ermao {
            float: left;
            width: 200px;
            height: 150px;
            background-color: red;
        }
        .sanmao {
            float: left;
            width: 300px;
            height: 240px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
        <div class="sanmao">三毛</div>
    </div>
</body>
</html>

3 清除浮动

3.1 为什么需要清除浮动？

由于父级盒子很多情况下,不方便给高度,但是子盒子浮动又不占有位置,最后父级盒子高度为0时,就会影响下面的标准流盒子。

  • 由于浮动元素不再占用原文档流的位置,所以它会对后面的元素排版产生影响
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>为什么需要清除浮动</title>
    <style>
        .box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }
        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }
        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .footer {
            height: 200px;
            background-color: black;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
    </div>
    <div class="footer"></div>
</body>
</html>

3.2 清除浮动本质

语法：

选择器 { clear: 属性值;}

在这里插入图片描述

我们实际工作中，几乎只用clear:both

清除浮动的策略是：闭合浮动

3.3 清除浮动方法

  1. 额外标签法也称为隔墙法,是W3C推荐的做法。

额外标签法会在浮动元素末尾添加一个空的标签。例如<div style=" clear:both" > </div>,或者其他标签(如<br/>等)。

  • 优点: 通俗易懂,书写方便
  • 缺点:添加许多无意义的标签,结构化较差

注意:要求这个新的空标签必须是块级元素。

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>17-清除浮动之额外标签法</title>
    <style>
        .box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }
        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }
        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .footer {
            height: 200px;
            background-color: black;
        }
        .clear {
            clear: both;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
        <div class="ermao">二毛</div>
        <div class="ermao">二毛</div>
        <div class="ermao">二毛</div>
        <div class="clear"></div>
        <!-- 这个新增的盒子要求必须是块级元素不能是行内元素 -->
        <span class="clear"></span>
    </div>
    <div class="footer"></div>
</body>
</html>
  1. 父级添加overflow属性

可以给父级添加overflow属性,将其属性值设置为hidden、auto或scroll

子不教父之过，注意是给父元素添加代码

  • 优点:代码简洁
  • 缺点:无法显示溢出的部分
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清除浮动之父元素overflow</title>
    <style>
        .box {
            /* 清除浮动 */
            overflow: hidden;
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }
        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }
        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .footer {
            height: 200px;
            background-color: black;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
    </div>
    <div class="footer"></div>
</body>
</html>
  1. 父级添加after伪元素
    :after方式是额外标签法的升级版。也是给父元素添加
.clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
}
.clearfix {
  /* IE6、7专有 */
     *zoom: 1;
}
  • 优点:没有增加标签,结构更简单
  • 缺点:照顾低版本浏览器

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清除浮动之伪元素清除</title>
    <style>
        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        .clearfix {
            /* IE6、7专有 */
            *zoom: 1;
        }
        .box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }
        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }
        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .footer {
            height: 200px;
            background-color: black;
        }
    </style>
</head>
<body>
    <div class="box clearfix">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
    </div>
    <div class="footer"></div>
</body>
</html>
  1. 父级添加双伪元素
    也是给父元素添加
.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}
  • 优点：代码更简洁
  • 缺点：照顾低版本浏览器
  • 代表网站：小米、腾讯等
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清除浮动之双伪元素清除</title>
    <style>
        .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }
        .clearfix:after {
            clear: both;
        }
        .clearfix {
            *zoom: 1;
        }
        .box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }
        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }
        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .footer {
            height: 200px;
            background-color: black;
        }
    </style>
</head>
<body>
    <div class="box clearfix">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
    </div>
    <div class="footer"></div>
</body>
</html>

3.4 清除浮动总结

为什么需要清除浮动?

  • 父级没高度。
  • 子盒子浮动了。
  • 影响下面布局了,我们就应该清除浮动了。

在这里插入图片描述

前进的北极熊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS / 圆角边框+阴影+浮动
K10
02-08 1437
目录 圆角边框 盒子阴影 文字阴影 传统网页布局的三种方式 浮动 浮动特性 浮动元素经常和标准流父级搭配使用 常见的网页布局案例 浮动布局注意点 圆角边框 语法：border-radius: 半径; radius是圆的半径 参数值可以是精确数值或百分比 50%为宽度和高度的一半 可以设置不同的圆角 border-radius: 10px 20px 30px 40px; 左上 右上 右下 左下 顺时针 两个值 是对角线 10px 20px 左上右下是10 右上左下是20
DIV+CSS 清除浮动常用方法总结
09-24
下面小编就为大家带来一篇DIV+CSS 清除浮动常用方法总结。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS3 圆角边框和浮动学习
weixin_53317758的博客
03-27 321
不光要复习还要多写代码才知道什么时候用什么样的属性，今天的学习没怎么沉下心，初级阶段都有这样的弊端把，哎呀一口气吃不成胖子慢慢消化多练习把 圆角边框 border-radius属性用预设值元素的外边框圆角 语法： border-radius: length; radius半径(圆的半径) 原理：(椭)圆与边框的交集形成圆角效果 参数值可以为数值或百分比的形式 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50％ 如果是矩形，设置为高度的一
css 中多层级设置圆角
轻风细雨_林木木
11-08 409
设置所需属性： border-radius: 20px; overflow: hidden; 设置位置：最外父级 实例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>多层.
圆角边框***
weixin_47481102的博客
05-12 2164
在css3中，新增了圆角边框样式，这样盒子就可以变圆角了。 border-radius属性用于设置元素的外边框圆角。 语法： border-radius：length； radius半径（圆的半径）原理：（椭）圆与边框的交集形成圆角效果 以上为圆角边框原理 参数值可以为数值或百分比的形式 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50% 如果是一个矩形，设置为高度的一半就可以做 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下.
解决 border-radius 元素在应用了 transform 的子元素 时overflow:hidden 失效的问题
03-31 799
　　受大家启迪，于是最近深入研究了一下Css3中的一些属性。之中也是碰到了个不为我知的问题，在这里特此总结并与大家分享。 　　问题重现：在父元素上应用了 border-radius 的圆角属性、加上 overflow:hidden属性 、并且子元素填充整个父元素。于是看到的效果是：子元素超出父元素圆角的部分被隐藏掉，形成一个圆角头像容器的结构。代码如下： 　　 <!...
html+css 清除浮动的相关技巧心得
09-24
下面小编就为大家带来一篇html+css 清除浮动的相关技巧心得。小编觉得挺不错的，现在分享给大家，给大家一个参考
DIV+CSS垂直居中一个浮动元素
09-25
对于页面上的块级元素，只须定宽及设置margin:auto 0;即可在垂直上居中，但对于浮动的元素垂直居中是无效的。那么我们如何来处理这个问题呢，今天我们来探讨下。
CSS的clear属性清除浮动的基本用法示例
09-24
清除浮动就是指解决浮动元素溢出容器的操作,其方法多种多样,这里我们来看最基本的一种:CSS的clear属性清除浮动的基本用法示例
CSS+JS实现的圆角边框TAB选项卡滑动门代码
06-06
本实例包含两款CSS圆角代码，可鼠标点击，也可鼠标移动上去显示效果
4.圆角边框
qq_62865634的博客
10-31 471
本文仅仅简单介绍了圆角边框，四个值的圆角边框（顺时针）。
圆角边框+盒子阴影+文字阴影
不爱吃菜的菜菜的博客
03-24 126
1. 圆角边框 border-radius：length；用于设置元素的外边框圆角 length越大， 半径越大，半径的圆越大，弧线越强烈。 参数值可以为数值或者百分比的形式 如果是正方形，想要设置为一个圆，把数值修改为高度或宽度的一半即可，或者直接写为50% .yuanxing { width: 200px; height: 200px; background-color: palevioletred;
html+css实战188-侧导航布局
geyaoisnice的博客
06-22 95
html
文本换行&背景属性&图片边框&CSS圆角&线性渐变&径向渐变
Fray_Zyt的博客
06-19 176
文本换行： word-wrap：normal（只在允许的断字点换行）/ break-word（允许长单词或URL地址换行到下一行）
CSS学习文档（四）：圆角边框、盒子阴影、浮动、学成在线案例
weixin_42044763的博客
05-12 1441
一、圆角边框，盒子阴影 1.圆角边框 在CSS3中新增了圆角边框的样式，这样盒子就可以变成圆角。语法是border-radius: length; 其中参数length表示圆角的半径，半径越大说明在角上画的⚪越大，那么圆角矩形的边框也就越⚪ border-radius: 20px; 如何画⚪？前提如果是正方形的盒子，那么length的值是宽高的一半即可，或者直接写50% border-radius: 50%; 如果想搞一个圆角矩形，那么length设置成高度的一半就可以了。 当然，也可以分别设置四个角
css給一个角加圆角,css圆角边框不起作用怎么办
weixin_29378975的博客
08-04 2277
css设置渐变边框设置圆角无效问题开门见山，当我们给一个元素的边框设置渐变色，那设置圆角就没有效果，以输入框为例:html:css:input{outline: none;background: #fff;width: 700px;height: 50px;border:2px solid;border-image:linear-gradient(138deg, red, blue) 2 2;bo...
Css 实现父元素设置 border-radius 时影响子元素圆角
票票的博客
01-27 3229
实现效果 代码 <view class="my-group-page-card-img"> <image class="portrait-img" src="@/static/img/head portrait.jpg"></image> <image class="portrait-img" src="@/static/img/head portrait2.jpg"></image> <image class="portrait-i
父元素设置了圆角，但是子元素没有设置圆角，子元素的直角遮挡了父元素的圆角
Elaine20132014的博客
04-22 4913
解决办法：在父元素上添加 overflow：auto
CSS学习（四）—— 边框与圆角
qq_43848400的博客
03-03 2552
七 、边框与圆角 1、边框 1）边框三要素 边框属性即border属性 border属性需要三个要素：线宽度、线型、线颜色 线宽度（border-width） 用长度来表示 线型（border-style） 常见的有 solid——实线； dashed——虚线； dotted——点状线 线颜色（border-color） 可拆分成三个小属性使用，用来在大属性样式的前提下进行小属性的层叠 给div、p等标签设置border属性时，若少写border-width、border-color时，也会出现边框，因
html+css+js画一个浮动箭头
最新发布
07-16
这段代码将创建一个具有黑色箭头的div元素，并使用CSS使其浮动在页面的中心位置。 如果您希望箭头在页面滚动时保持固定位置，可以将`position`属性的值从`fixed`改为`absolute`。 希望这可以帮助到您！如果您有...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值