HTML5基础加强css样式篇（css属性border圆角：border-radius）（三十五）

最新推荐文章于 2024-07-04 14:41:29 发布

咸鸭蛋炒饭

最新推荐文章于 2024-07-04 14:41:29 发布

阅读量1.4k

点赞数 1

分类专栏： HTML5基础篇文章标签：经验 html5 css html

本文链接：https://blog.csdn.net/u010853130/article/details/69390311

版权

HTML5基础篇专栏收录该内容

121 篇文章 7 订阅

订阅专栏

1.制作圆角：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box {
            /* .box 默认样式 */
            margin: 200px 0 0 200px;
            width: 200px;
            height: 200px;
            background-color: orange;
            /*①*/
            border-radius: 50px;
	/*②*/
            border-radius: 50px 20px;
	 /*③*/
            border-radius: 50px 20px 5px;
	 /*④*/
            border-radius: 50px 20px 5px 80px; 
        }

        .box:hover {
            /* 鼠标悬浮时样式 */

        }
    </style>
</head>
<body>

<div class="box"></div>

<script type="text/javascript">
</script>
</body>
</html>

效果如下：

①②③④

2.使用圆角制作椭圆：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box {
            /* .box 默认样式 */
            margin: 200px 0 0 200px;
            width: 400px;
            height: 200px;
            background-color: orange;

            /*border-radius: 水平半径 / 垂直半径*/
            border-radius: 200px/100px;

            border-radius: 200px 50px/ 100px 5px;
            border-radius: 200px 50px 10px / 100px 5px 60px;

        }

        .box:hover {
            /* 鼠标悬浮时样式 */

        }
    </style>
</head>
<body>

<div class="box"></div>

<script type="text/javascript">
</script>
</body>
</html>

效果：

3.画1/4圆代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box {
            /* .box 默认样式 */
            margin: 200px 0 0 200px;
            width: 200px;
            height: 200px;
            background-color: orange;

            border-radius: 200px 0 0 0;
        }

        .box:hover {
            /* 鼠标悬浮时样式 */

        }
    </style>
</head>
<body>

<div class="box"></div>

<script type="text/javascript">
</script>
</body>
</html>

效果如下：

4.画一个半圆：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box {
            /* .box 默认样式 */
            margin: 200px 0 0 200px;
            width: 400px;
            height: 200px;
            background-color: orange;

            border-radius: 200px 200px 0 0;
        }

        .box:hover {
            /* 鼠标悬浮时样式 */

        }
    </style>
</head>
<body>

<div class="box"></div>

<script type="text/javascript">
</script>
</body>
</html>

效果图如下：

5.border中百分比的使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box {
            /* .box 默认样式 */
            margin: 200px 0 0 200px;
            width: 200px;
            height: 200px;
            background-color: orange;
            border: 20px solid #0000ff;

            border-radius: 100px;

            /*推荐使用%设置圆角半径，可以随着元素大小动态调整*/
            border-radius: 50%;

            /*border-radius: 120px;*/
        }

        .box:hover {
            /* 鼠标悬浮时样式 */

        }
    </style>
</head>
<body>

<div class="box"></div>

<script type="text/javascript">
</script>
</body>
</html>

效果图：

6.border旋转效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box {
            /* .box 默认样式 */
            margin: 200px 0 0 200px;
            width: 200px;
            height: 200px;
            /*background-color: orange;*/

            /*border: 20px solid;*/
            border-top: 20px solid orange;
            border-right: 20px solid orange;

            border-bottom: 20px solid #7e64ff;
            border-left: 20px solid #7e64ff;


            border-radius: 50%;

        }

        .box-txt{
            width: 200px;
            height: 200px;
            line-height: 200px;
            text-align: center;
        }

        .box:hover{
            transform: rotate(360deg);
            transition: 5s;
        }
        .box:hover .box-txt{//使文字逆时针旋转保持文字不动
            transform: rotate(-360deg);
            transition: 5s;
        }


    </style>
</head>
<body>

<div class="box">
    <div class="box-txt">Hello</div>
</div>

<script type="text/javascript">
</script>
</body>
</html>

效果图如下：