CSS圆角边框，浮动（float）案例，常见网页布局181

最新推荐文章于 2023-09-15 17:02:46 发布

IE吃饭

最新推荐文章于 2023-09-15 17:02:46 发布

阅读量422

点赞数

文章标签： css

本文链接：https://blog.csdn.net/luojunjie1999/article/details/107320499

版权

本文介绍了如何使用CSS实现圆角边框，包括圆形和圆角矩形的设置，以及盒子和文字阴影的应用。同时，深入探讨了浮动（float）属性，讲解了浮动的语法和特性，并通过浮动案例1和浮动案例二展示了其在网页布局中的应用。此外，还提及了基础的网页布局原则。

摘要由CSDN通过智能技术生成

圆角边框
在这里插入图片描述
圆形设置方法：设置为高度和宽度的一半

  <style>
    div{
   
      width: 100px;
      height: 100px;
      background-color: pink;
      border-radius: 50%;
    }
  </style>

圆角矩形设置方法：设置为高度的一半

    div{
   
      width: 200px;
      height: 100px;
      background-color: pink;
      border-radius: 50px;
    }

设置不同的圆角

      border-radius: 10px 20px 50px 40px;
      border-top-left-radius: 10px;

盒子阴影
在这里插入图片描述

      box-shadow: 5px 5px 5px 5px rgba(0, 0, 0,0.3) ;

文字阴影
与盒子阴影类似
在这里插入图片描述

网页布局第一准则：
在这里插入图片描述
1.标准流

2.浮动
浮动语法：

3.浮动特性

浮动案例1：

  <style>
    .box{
   
      width: 1285px;
      height: 600px;
      background-color:yellow

关注