边框圆角Css
.box{
background:grey; //灰色背景
height:50px; //高500像素
width:200px; //宽200像素
border-top-left-radius:15px; //边框 左上 圆角15像素 4个圆角都是15像素
border-top-right-radius:15px;
border-bottom-right-radius:15px;
border-bottom-left-radius:15px;
} 也可以这么写 .box{
border-radius:15px;
}
或者这么写
.box{
border-radius:15px 10px 15px 20px;
}
设置规则:
一个值:四个圆角的值相同
两个值:第一个值为左上角与右下角,第二个值为右上角以左下角
三个值:第一个值为左上角,第二个值为右上角和左下角,第三个值为右下角
四个值:第一个值为左上角,第二个值为右上角,第单个值为右下角,第四个值为左下角
使用百分比:
.box{
border-radius:50%;
}
圆角半径分别是height和width的50%
椭圆圆角:
.box{
border-radius:50px/15px
}
第一个值为圆角的横轴半径,第二个值为圆角的纵轴半径
边框圆角Css的更多相关文章
- CSS的display、hover、overflow、©(版权符号)、borer-radius(边框圆角)
一.display: none 隐藏 block显示 visibility:hidden隐藏 visible显示 display:none和visibility:hidden这两个属性对应的值 ...
- CSS border-radius边框圆角
在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 ...
- CSS(五)- 背景与边框 - 边框圆角与阴影基础用法
扩展阅读 本文仅仅做border的基础使用,想要深入了解的话可以戳以下几个链接,觉得作者写的很好. CSS Backgrounds and Borders Module Level 3 CSS魔法堂: ...
- css边框样式、边框配色、边框阴影、边框圆角、图片边框
边框样式 点线式边框 破折线式边框 直线式边框 双线式边框 槽线式边框 脊线式边框 内嵌效果的边框 突起效果的边框 <div style="width: 300px; height: ...
- CSS3 border-radius边框圆角
在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 ...
- 使用css3来实现边框圆角效果
经常看到别人的网站有个边框来修饰文字区域,类似圆角矩形把文字环绕起来,特别有感觉,于是就试着用图片边框来修饰,但是用图片过多会拉慢网页的加载速度,能不能使用css3来实现边框圆角效果呢?当然borde ...
- CSS3 02. 边框、边框圆角、边框阴影、边框图片、渐变、线性渐变、径向渐变、背景、过渡transition、2D转换
边框圆角 border-radius 每个角可以设置两个值,x值.y值 border-top-left-radius:水平半径 垂直半径 border-radius:水平半径/垂直半径 border- ...
- 从零开始学 Web 之 CSS3(二)颜色模式,文字阴影,盒模型,边框圆角,边框阴影
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- css3(border-radius)边框圆角详解(转)
css3(border-radius)边框圆角详解 (2014-05-19 16:16:29) 转载▼ 标签: divcss html it css3 分类: 网页技术 传统的圆角生成方案,必须使用多 ...
随机推荐
- JAVA 从头开始<五>
一.反编译 java代码 javac编译后的class文件,想要看得懂,需要使用反编译工具 使用bin目录下的java开发工具(javap.exe) 二.构造函数 三.构造代码块 1.类中可能有多个构 ...
- Docker容器的原理与实践(上)
本文来自网易云社区. 虚拟化 是一种资源管理技术,将计算机的各种资源予以抽象.转换后呈现出来, 打破实体结构间的不可切割的障碍,使用户可以比原本更好的方式来应用这些资源. Hypervisor 一种运 ...
- Ubuntu16.04 - 安装gtk+-3.0和appindicator3-0.1
今天在Ubuntu16.04里面遇到这样的问题: # pkg-config --cflags gtk+-3.0 appindicator3-0.1Package gtk+-3.0 was not fo ...
- robot framework 测试/预发/线上环境快捷切换
通常情况下布署的三套环境:测试.预发及线上环境.调试或者辅助验证测试时,切环境改变量甚是麻烦.这些变量包括但不限于:一些url信息,数据库信息,预置用户信息等. 切换环境方法一:使用变量文件,通过判断 ...
- 基于Spring Boot的Logback日志轮转配置
在生产环境下,日志是最好的问题调试和跟踪方法,因此日志的地位是十分重要的.我们平时经常使用的log4j,slf4j,logback等等,他们的配置上大同小异.这里就结合Spring Boot配置一下L ...
- 用 TensorFlow 实现 SVM 分类问题
这篇文章解释了底部链接的代码. 问题描述  如上图所示,有一些点位于单位正方形内,并做好了标记.要求找到一条线,作为分类的标准.这些点的数据在 inearly_separable_data.csv ...
- js的let语句在安卓手机端的QQ浏览器出错的问题
关于JavaScript里面的let,let 语句可以声明一个块级作用域的本地变量,并且可选的将其初始化为一个值. <ul id="list"> </ul> ...
- VmWare扩展硬盘分区
扩展硬盘 对硬盘进行分区 () 查看现有的硬盘分区情况 [mysql@china ~]$ df -h Filesystem Size Used Avail Use% Mounted on /dev/m ...
- leetcode-64-最小路径和
题目描述: 给定一个包含非负整数的 m x n 网格,请找出一条从左上角到右下角的路径,使得路径上的数字总和为最小. 说明:每次只能向下或者向右移动一步. 示例: 输入: [ [1,3,1], [1 ...
- 移植C/C++代码的十个技巧
这篇文章是我翻译自Top 10 tips for code porting c/c++的一篇小短文,以下是翻译全文,如有错误请留言或查阅原文. 代码的可移植性基本上是指使得源代码能够在不同的平台上编译 ...