css样式布局的椭圆
来源:互联网 发布:烟台龙口淘宝招聘网 编辑:程序博客网 时间:2024/05/14 16:27
<div>方形框</div>
<div class="rounded">圆角形框</div>
<div class="asymmetric-radius">椭圆边形框</div>
<div class="asymmetric-corners">半圆形框</div>
<div class="percentages">圆形框</div>
<div class="sub-properties">单圆角形框</div>
<div class="brackets">小括号形框</div>
<div class="brackets"><span class="inner-brackets">双小括号形框</span></div>
<div class="squarebrackets">中括号形框</div>
<style>
div {
width:150px;
/* you can add backround style by yourself */
height: 150px;
margin: 10px;
float: left;
text-align:center;
line-height:150px;
font-size: 24px; color:#FF7B3A;font-family:Microsoft JhengHei;
border: 10px solid #F54;
}
/*
Specify the readius for all corners.
*/
.rounded {
border-radius: 30px;
}
/*
You can use assymetric radius. Just provide horizontal / vertical.
*/
.asymmetric-radius {
border-radius: 30px / 90px;
}
/*
You can specify a distinct radius by corner.
*/
.asymmetric-corners {
border-radius: 90px 60px 30px 5px;
}
/*
You can use percentages...
Hey! It's a circle!
*/
.percentages {
border-radius: 50%;
}
/*
And you can provide them with sub properties.
*/
.sub-properties {
border-top-left-radius: 10px;
/* Note there is no / symbol here! */
border-bottom-right-radius: 80px 40px;
}
/*
border-radius is not only used for rounding corners.
*/
.brackets {
border-top: none;
border-bottom: none;
border-radius: 30px / 90px;
}
.inner-brackets {
border-top: none;
border-bottom: none;
border-radius: 20px / 70px;
}
span{
width:120px;
height: 130px;
margin: 7px;
float: left;
border: 8px solid #F54;
font-size: 18px; color:#FF7B3A;font-family:Microsoft JhengHei;
}
.squarebrackets {
border: none;
position: relative;
width: 150px;
height: 150px;
padding: 0;
margin: 1em;
}
.squarebrackets:before, .squarebrackets:after{
content: '';
display: block;
height: 100%;
width: 15px;
border: 8px solid #F54;
position: absolute;
top: -5px;
}
.squarebrackets:before{ left: 0; border-right: 0; }
.squarebrackets:after{ right: 0; border-left: 0; }
</style>
- css样式布局的椭圆
- css 样式布局的问题
- CSS实现样式布局
- css常用布局样式
- css常用布局样式
- li 布局 CSS样式
- CSS样式布局
- css样式布局
- CSS样式主页布局
- CSS样式,布局,动画
- 样式表CSS布局经验
- CSS样式四--布局模型
- CSS高级布局样式技巧
- 常用自适应样式 CSS 布局
- css的精髓是布局,而不是样式——之一
- 必须懂的通用css布局样式属性
- css样式布局中position的那些事儿
- 精通CSS+DIV网页样式与布局--滤镜的使用
- HTML5 LocalStorage 本地存储JSON数据
- Java WebService_cxf (1) 入门案例
- ubuntu 12.04 系统密码破译
- JS实现JSON.stringify
- 黑客的攻击(UVA 11825)
- css样式布局的椭圆
- EasyPR--开发详解(8)文字定位
- jquery 选择器
- JSON 字符串 与 java 对象的转换
- yum -b 参数学习
- dokuwiki插件的常用配置及其他Tips
- deledate
- ZBrush骨骼雕刻的三个技巧
- 控件的抬起和按下事件