CSS3---圆角设置
1.border-radius是向元素添加圆角边框。border-radius:10px; /* 所有角都使用半径为10px的圆角 */ border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角,顺时针 */
实心上半圆:
方法:把高度(height)设为宽度(width)的一半,并且只设置左上角和右上角的半径与元素的高度一致(大于也是可以的)。
div{
height:50px;/*是width的一半*/
width:100px;
background:#9da;
border-radius:50px 50px 0 0;/*半径至少设置为height的值*/
}
实心圆: 方法:把宽度(width)与高度(height)值设置为一致(也就是正方形),并且四个圆角值都设置为它们值的一半。如下代码:
div{
height:100px;/*与width设置一致*/
width:100px;
background:#9da;
border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/
}
CSS3---圆角设置的更多相关文章
- 19 01 04 CSS3 圆角 grba(带通明的) tansition动画 transform变换 animation动画
CSS3圆角 设置某一个角的圆角,比如设置左上角的圆角:border-top-left-radius:30px 60px; 同时分别设置四个角: border-radius:30px 60px 120 ...
- CSS3圆角
使用border-radius属性: (1): (2)但是,如果你要在四个角上一一指定,可以使用以下规则: 四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角. 三个值: ...
- border-radius 样式表CSS3圆角属性
border-radius 是CSS3圆角属性,用来实现DIV层的4个边框画成圆角. 一.语法: border-radius : none | <length>{1,4} [/ <l ...
- IE兼容CSS3圆角border-radius的方法(同时兼容box-shadow,text-shadow)
IE兼容CSS3圆角border-radius,box-shadow,text-shadow的方法 1.下载ie-css3.htc 2.CSS box { -moz-border-radius: 15 ...
- CSS3圆角详解
一.CSS3圆角的优点 传统的圆角生成方案,必须使用多张图片作为背景图案.CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,而且还有其他多个优点: * 减少维护的工作量.图片文件的生成.更新. ...
- 从零开始学习前端开发 — 16、CSS3圆角与阴影
一.css3圆角: border-radius:数值+单位; 1.设置一个值:border-radius:20px; 四个方向圆角都为20px(水平半径和垂直半径相等) 2.设置两个值 border- ...
- CSS3圆角详解第一辑
有很多人都知道圆角怎么写,加一个border-radius就可以,但是对于用圆角的一些细节却并不是很清楚,那么我们今天就来聊一聊这个圆角.CSS3是样式表(style sheet)语言的最新版本,它的 ...
- CSS3圆角详解(border-radius)
1.CSS3圆角的优点 传统的圆角生成方案,必须使用多张图片作为背景图案.CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,而且还有其他多个优点: 减少维护的工作量.图片文件的生成.更新.编写 ...
- CSS3 圆角属性 border-radius和-webkit-border-radius使用
CSS3 圆角属性 border-radius 在 CSS3 中新增了一个 border-radius 边框半径属性,即大家常用的圆角效果.这使得制作圆角将不再麻烦,只需对所用对象加一个 border ...
- css3圆角矩形、盒子阴影
css3圆角矩形 div{ width: 200px; height: 200px; border: #f00 solid 1px; margin-bottom: 10px; } 1.设置 borde ...
随机推荐
- 第五篇 .NET高级技术之CTS、CLS、CLR
CTS.CLS.CLR 1. .Net平台下不只有C#语言,还有VB.Net.F#等语言.IL是程序最终编译的可以执行的二进制代码(托管代码),不同的语言最终都编译成标准的IL(中间语言,MSIL): ...
- Redis的高级特性哨兵
一.哨兵介绍 Redis Sentinel,即Redis哨兵,在Redis 2.8版本开始引入.哨兵的核心功能是主节点的自动故障转移.下面是Redis官方文档对于哨兵功能的描述: 监控(Monitor ...
- background-size属性
background-size:属性有 auto:length :百分比 length 如:10px 20px 固定的 或者是写成一个 ,10px 另外一个就默认为 auto; 写成百分比的形式 是 ...
- 接口测试postman和Jmeter
接口测试属于功能测试的范畴,一般来说分为两种,一种是程序内部的接口,一种是系统对外的接口. postman测试接口 1. get请求: (1) 直接在浏览器中输入接口地址+?+参数 (2)使用post ...
- AtCoder Grand Contest 017 A
Problem Statement There are N bags of biscuits. The i-th bag contains Ai biscuits. Takaki will selec ...
- javaFx 学习笔记
1.每个javaFx程序定义在一个继承自javafx.application.Application的类中 Button:用于设置一个按钮,Button btOK = new Button(" ...
- RHEL 6.5----LVS(DR)
主机名 IP 所需软件 master eth0==>192.168.30.140(Nat) eth0:1==>192.168.17.130(Nat) ipvsadm node-1 et ...
- MongoDB管理练习
一.索引 1.插入10W条数据 文档内容为:{name:zs-i,age:1} 2016-06-07T14:35:57.041+0800 I CONTROL [initandlisten] > ...
- Arduino Ethernet W5100扩展板的指示灯含义
Arduino Ethernet W5100扩展板是继承WIZnet W5100网络芯片的扩展板.将扩展板连接到Arduino后,可使Arduino具有网络功能.此扩展板上有多个指示灯,由于轻易查不到 ...
- kde framework概述(KDE Framework译文)
KDE Frameworks 基于QT框架,提供简单实用的类(例如那些KCoreAddons里的类)去为桌面应用的日常需要整合出解决方案(例如KNewStuff用于在应用中获取可下载的附加内容,或者那 ...