分享好友 教程首页 教程搜索 频道列表

圆角边框的css属性

2022-08-28 02:151860
+关注2
核心提示:圆角边框的css属性是什么:1.圆角边框简介就是通过bor

圆角边框的css属性是什么:

1.圆角边框简介

就是通过border-radius属性对元素的四个角进行设置{属性不具有继承性}。

border-radius有四个属性分别是top,left,right,bottom,可以进行设置像素。也可以直接设置一个值四边都是相等的。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    div{border: 5px solid red;
        border-radius: 50px;
        width: 50px;
        height: 100px;
        background-color: yellowgreen;
        margin:auto;
        box-shadow: 100px 100px 40px green;}
    </style>
</head>
<body>
<div></div>
      
</body>
</html>



也可以同时设置两个值border-radius: 50px 99px;对应的分别是上下是50px,左右是99px。 也可以设置三个值按顺时针设置border-radius: 50px 99px 40px;其中的上面是50px,左面右面是99px,底边是40px。

2.也可以使用border-radius:r来设置圆形这里的r是指半径的大小(有长度单位),要创建圆形应该设置r的值为元素的高度和长度的一半。当高宽相等时这种取值的方法就是圆形改变宽和高就朝着椭圆形发展了。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    div{border: 5px solid red;
        border-radius: 50%;
        width: 100px;
        height: 100px;
        background-color: yellowgreen;
        margin:auto;
        box-shadow: 100px 100px 40px green;}
    </style>
</head>
<body>
<div></div>
      
</body>
</html>


本文标签: #css #圆角
整理员:网络转载
免责声明:凡注明来源本网的所有作品,均为本网合法拥有版权或有权使用的作品,欢迎转载,注明出处。非本网作品均来自互联网,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。
生成海报
您可能在找更多

HTML5+CSS3+JS实例之带标题描述的圆角图片手风琴效果

    圆角图片手风琴效果

小黑 HTML教程2024-03-26

纯CSS代码写出各种不规则的形状图形实例展示

    做网页设计时经常要用到各种形状的图形,对于规则的图形很简单,但是对于不规则的图形,一般我们都是用图片来切图实现。不过今天给大家分享几十种看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形、圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家。

网络转载 CSS教程2023-10-11

DESTOON9.0自带CSS和JS文件强制刷新功能

    由于浏览器的缓存机制,服务器端修改CSS或JS文件后,用户端不会立即生效,一般需要用户按F5或Ctrl+F5强制刷新,或者等浏览器缓存过期后自动更新。自V9.0,系统在根目录version.inc.php里定义了DT_REVISOR常量来控制C

DESTOON web前端开发2023-09-27

CSS v4.0参考手册

    《CSS在线手册》为官方CSS在线参考手册,本CSS在线开发手册包含了各种css属性、定义、使用方法,实例运行等,是WEB编程学习及开发者不可或缺的在线查询手册!CSS:层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)。

网络转载 CSS教程2023-05-10

下一篇
我来说两句
抢沙发