css圆角设置方法,css---圆角设置
1.为元素添加四个相同的圆角:
语法结构:border-radius:r;
r为圆角的半径大小
eg:如下样式,给元素添加四个圆角为10px
代码如下:
radius
div{
width: 100px;
height: 100px;
background-color: aqua;
border-radius: 10px;
}
2.为元素创建一个圆角
语法结构:
左上角:border-top-left-radius: r ;
右上角:border-top-right-radius: r ;
左下角:border-bottom-left-radius: r ;
右下角:border-bottom-right-radius: r ;
eg:如下样式,给元素添加左上角圆角为30px
代码如下:
radius
div{
width: 100px;
height: 100px;
background-color: aqua;
border-top-left-radius: 30px;
}
3.为元素创建一个椭圆角
语法结构:
左上角:border-top-left-radius: x y ;
右上角:border-top-right-radius:x y ;
左下角:border-bottom-left-radius: x y ;
右下角:border-bottom-right-radius: x y ;
其中x表示圆角在水平方向上的半径大小,y表示圆角在垂直方向上的半径大小
eg:如下样式,给元素添加左上角圆角在水平方向上为10px,在垂直方向上为30px
代码如下:
radius
div{
width: 100px;
height: 100px;
background-color: aqua;
border-top-left-radius: 10px 30px;
}
4.圆形设置:
方法1:
条件1:定义width等于height
条件2:radius=1/2width
代码如下:
radius
div{
width: 100px;
height: 100px;
background-color: aqua;
border-radius: 50px;
}
方法2:
定义:radius:50%(永远为容器的一半)
代码如下:
radius
div{
width: 100px;
height: 100px;
background-color: aqua;
border-radius: 50%;
}
5.半圆设置:
语法结构:
border-radius:r1 r2 0 0;
其中r1和r2是左右上角的半径大小,左下角和右小角设置为0
设定条件:r1=r2=1/2width=height
eg:设定一个直径为100px的半圆
代码如下:
radius
div{
width: 100px;
height: 50px;
background-color: aqua;
border-radius: 50px 50px 0 0;
}
6.椭圆形设置:
语法结构:
border-radius:x/y;
其中x表示圆角在水平方向上的半径大小,y表示圆角在垂直方向上的半径大小
eg:设置一个与容器为w:200px,h:100px内相切的一个椭圆形
代码如下:
radius
div{
width: 200px;
height: 100px;
background-color: aqua;
border-radius: 100px/50px;
}
7.给radius赋多个值的含义:
(1) border-radius:r1 r2;
其中r1是左上角和右下角的半径大小,r2是左下角和右上角的半径大小
eg:如下样式,左上角和右下角的半径为10px,左下角和右上角的半径为30px
代码如下:
radius
div{
width: 100px;
height: 100px;
background-color: aqua;
border-radius: 10px 30px;
}
(2) border-radius:r1 r2 r3 r4;
其中r1是左上角半径大小,r2是右上角半径大小,r3是右下角半径大小,r4是左下角半径大小
eg:如下样式,左上角半径大小10px,右上角半径大小20px,右下角半径大小30px,左下角半径大小40px
代码如下;
radius
div{
width: 100px;
height: 100px;
background-color: aqua;
border-radius: 10px 20px 30px 40px;
}
css圆角设置方法,css---圆角设置相关推荐
- CSS 文本字体颜色设置方法(CSS color)
转自:微点阅读 https://www.weidianyuedu.com 这篇文章主要介绍了CSS 文本字体颜色设置方法(CSS color),需要的朋友可以参考下 一.认识CSS 颜色(CSS c ...
- html密保问题设置,QQ密保设置方法_怎么设置QQ密保详细教程【图文】-太平洋电脑网PConline-太平洋电脑网...
我们都知道在QQ申请成功之后,为了QQ账号的安全,我们可以设置密保问题,当我们下次更改密码的时候就需要输入密保问题才可以更改,这样当QQ被盗的时候,想要更改密码也不是那么的容易,同时也可以保护我们的Q ...
- 计算机的低配置的cpu,绝地求生低配电脑CPU负担低设置方法汇总 怎么样设置对cpu压力小...
很多玩家都玩过绝地求生或者想玩一下绝地求生,但是发现自己电脑的配置好像玩起来有点卡,甚至个别电脑会出现cpu过载的情况,那到底是怎么回事呢,这里小编就来教一下大家绝地求生低配电脑CPU负担低设置方法汇 ...
- jsp页面 字体颜色 白色_CSS 文本字体颜色设置方法(CSS color)
一.认识CSS 颜色(CSS color) 这里要介绍的是网页设置颜色包含有哪些:网页颜色规定规范. 1.常用颜色地方包含:字体颜色.超链接颜色.网页背景颜色.边框颜色 2.颜色规范与颜色规定:网页使 ...
- 浏览器的两种设置方法:本地的设置方法与静默设置
本地方法设置: #本地Chrome浏览器的可视模式设置 #从selenium库中调用webdriver模块 from selenium import webdriver #设置引擎为Chrome,真实 ...
- OS X系统 手势终极设置方法+BetterTouchTool详细设置中文翻译
相信用过罗技G系鼠标的同学都对罗技鼠标强大的自定义功能留下过深刻的印象.对于那些表示只愿追求简单拒绝功能复杂而去使用三键鼠标的同学,我很怀疑他们是否真正了解到多键鼠标或手势功能对电脑操作便捷上带来的重 ...
- outlook修改服务器设置方法,Outlook怎么设置?Outlook设置方法
Outlook怎么设置?有使用的用户都了解,如果说只是简单的收发邮件,那么使用网页版的Outlook邮箱就够了,不过需要使用到一些其它功能设置就需要使用Outlook客户端,那么Outlook如何设置 ...
- 联想服务器如何设置uefi启动不了系统,联想uefi启动设置方法 联想电脑如何设置uefi启动...
市面上的电脑大部分都预装 联想电脑使用UEFI模式注意事项: 1. 2.uefi模式开启后分区形式需要采用gpt分区,我们可以用diskgenius分区工具快速分区时选择guid(gpt)分区. 3. ...
- 海信信号机后台服务器配置,海信电视信号源设置方法-电视机信号设置方法
用机顶盒时,怎样把创维电视机信号源锁定到视频1 用机顶盒时把创维电视机信号源锁定到视频1的方法: 1.按电视机遥控器的"信号源"键: 2.电视屏幕会显示"视频1" ...
- 外网访问内网服务器设置方法(路由器设置)
A.外网访问内网服务器的设置方法 实验室有一台服务器,现有外网访问该服务器的需求,网上有各种教程,但是有些地方比较模糊,不甚详细,现将我的设置记录如下,作为参考. 目前的情况是,整个实验室属于一个 ...
最新文章
- spring-mvc(基础)
- 【STM32】FreeRTOS下载和介绍
- mysql select查询语句_mysql的select查询语句
- python 验证模型_Python中的模型验证
- 程序员的搞笑日常,你们懂得!....
- 分布式面试 - 集群部署时的分布式 session 如何实现?
- Android手机截屏
- h3c交换机配置telnet_H3C路由器交换机配置 命令行操作基础 视频学习
- IOS动画隐式,显式,翻页
- linux 多路径配置
- java股票公式源码_通达信公式转java
- 微信小程序-使用ColorUI
- 京东联盟接口——链接取商品sku
- 直播技术——流媒体协议
- 安卓键 adb shell input keyevent code
- 算法设计和分析 ② 分治和递归
- logistic混沌 matlab,混沌映射(序列)matlab算法“小全”:Logistic、Henon、帐篷、kent(含混沌二值图像生成函数)...
- word2016 脚注问题总结
- 使用UI组件库antd
- 访谈:腾讯高级交互设计师C7210的十年设计路(上)
热门文章
- oracle_____对列的常用操作
- 多端融合,智能生态链,星纪时代的星纪互联还能遇见多少可能?
- html上下箭头控制文本框加减,HTML5去掉输入框type为number时的上下箭头的实现方法...
- php 代付功能_娱谷API聚合支付系统是怎么实现支付代付功能的?
- php正则表达式小括號,正则表达式中的小括号用法
- w计算机二级word单选题,2017全国计算机二级MS-Office选择题题库大全.pdf
- iOS安全攻防(九):使用Keychain-Dumper导出keychain数据
- 2021 阿里字节快手面经 个人成长经验分享
- 金蝶委外订单后台代码
- 判断两个List元素是否相同;