border-radius实例1
简单参数设置一
1.html
<div class="paddingBig">
<div class="divSmall radiusOne"></div>
<div class="divSmall radiusTwo"></div>
<div class="divSmall radiusThree"></div>
<div class="divSmall radiusFourth"></div> <div class="clear"></div>
<div class="blank"></div> <div class="divSmall radiusFive"></div>
<div class="divSmall radiusSix"></div>
</div>
2.css
.divSmall {
float: left;
margin-right: 30px;
border: 2px solid blue;
}
/*只取一个值,四角居右相同的圆角设置*/
.radiusOne {
border-radius: 10px;
}
/*设置两个值,先左上右下,再右上左下*/
.radiusTwo {
border-radius: 5px 30px;
}
/*设置三个值,先左上,再右下,再右上左下*/
.radiusThree {
border-radius: 5px 15px 30px;
}
/*设置四个值,先左上、再右上,再右下,再左下*/
.radiusFourth {
border-radius: 5px 15px 30px 50px;
} /*反斜杠,设置一个值,四个角水平半径/垂直半径 */
.radiusFive {
border-radius: 10px / 40px;
}
/*反斜杠,设置两个值,先左上右下,再右上左下 水平半径/垂直半径*/
.radiusSix {
border-radius: 5px 20px / 40px 10px;
}
显示结果:
相关设置二
1.html
<div class="paddingBig">
<div class="divSmall radiusOne"></div>
<div class="divSmall radiusTwo"></div>
<div class="divSmall radiusThree"></div>
<div class="divSmall radiusFourth"></div>
<div class="clear"></div>
</div>
<div class="blank"></div>
<div class="paddingMiddle">
<img src="../Images/3.jpg" class="radiusSix"/>
<img src="../Images/4.jpg" class="radiusSeven" />
</div>
2.css
.divSmall {
float: left;
margin-right: 30px;
border: 2px solid blue;
} img {
float: left;
width: 100px;
height: 100px;
margin-right: 30px;
} .radiusOne {
border-radius: 15px;
border: 15px solid green;
}
/*border-radius的内径值是等于外径值减去边框厚度值*/
.radiusTwo {
border: 15px solid green;
border-radius: 25px;
} .radiusThree {
border-color: red;
border-style: solid;
border-width: 10px 5px 20px 3px;
border-radius: 30px;
} .radiusFourth {
border-style: solid;
border-color: red green blue orange;
border-width: 15px 30px 30px 80px;
border-radius: 50px;
} .radiusSix {
border-radius: 5px 50px 5px;
} .radiusSeven {
border: 10px solid green;
border-radius: 5px 5px 50px 5px;
}
显示结果:
border-radius实例1的更多相关文章
- 重温CSS:Border属性
边界是众所周知的,有什么新的东西吗?好吧,我敢打赌,在这篇文章中,有很多你不看永远不知道的东西! 不仅可以用CSS3来创建圆角,使用原有CSS一样可以显示自定义图形.这是正确的(有待考究):在过去,没 ...
- [css]需警惕CSS3属性的书写顺序
转载张鑫旭:http://www.zhangxinxu.com/wordpress/2010/09/%E9%9C%80%E8%AD%A6%E6%83%95css3%E5%B1%9E%E6%80%A7% ...
- iOS图形处理和性能(转)
在之前的文章里,我们探讨了基于多种不同技术来实现自定义的UIButton,当然不同的技术所涉及到的代码复杂度和难度也不一样.但是我也有意提到了基于不同方法的实现所体现出的性能表现也不一一相同. [ ...
- iOS图形处理和性能
转自陶丰平的博客 原文的题目是Designing for iOS: Graphics & Performance,晚上花了两个不到小时大致翻译了下. ---Begin--- 在之前的文章里 ...
- 微信小程序弹出可填写框两种方法
方法一: html页面: < view class = "container" class = "zn-uploadimg" > < butt ...
- jquery toast插件
插件描述:Toaster.js是一款Material Design风格jquery toast插件.Toaster.js提供5种主题,以及众多配置参数,用于显示toast类型的消息提示框.兼容性如下: ...
- 前端笔记之Vue(三)生命周期&CSS预处理&全局组件&自定义指令
一.Vue的生命周期 生命周期就是指一个对象的生老病死的过程. 用Vue框架,熟悉它的生命周期可以让开发更好的进行. 所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和 ...
- 如何高效的阅读uni-app框架?(建议收藏)
作者 | Jeskson来源 | 达达前端小酒馆 uni-app的框架,配置:page.json,manifest.json,package.json,vue.config.js.脚本,应用程序,ma ...
- css 边框和圆角
CSS3圆角 border-radius属性 一个最多指定四个border -*- radius复合属性,这个属性允许你为元素添加圆角边框 语法 border-radius:1-4 length|% ...
- vue 表格组件分享
分享一款自己写的table组件 用起来还算简单好用 (先介绍使用方法(ts版本的)) 引入组件不多说 import jTable from '../comp/comp/table/table.v ...
随机推荐
- 11 java 反射机制
Java反射机制的适用场景及其利与弊: http://blog.csdn.net/zolalad/article/details/29370565 http://my.oschina.net/u/10 ...
- JavaScript高级程序设计(学习笔记)
第13章 事件 一.事件 1.1事件冒泡:事件发生时从里面向外传播 如:div>body>html>document 1.2事件捕获:事件发生时从外层向里层传播 如 doc ...
- Hibernate学习笔记(一):mycelipse建立项目流程(未完成)
1.部署数据库: 2.部署项目: 3.引入Hibernate: 4.url配置
- 自定义滚动条 niceScroll 配置参数
配置参数 当调用“niceScroll”你可以传递一些参数来定制视觉方面: cursorcolor - 十六进制改变光标颜色,默认值是“#000000” cursoropacitymin - 改变不透 ...
- JS对象排序
function createComparisonFunction(propertyName) {return function(object1, object2){var value1 = obje ...
- [Mugeda HTML5技术教程之19]制作可定制贺卡
本文档通过一个实例介绍可定制贺卡的动画的制作过程.实例包含两部分: 1. 动画部分:介绍动画制作过程中如何给祝福词和落款的文本对象命名,如何给定制按钮定义表单动作. 2. 代码部分:介绍贺卡的脚本逻辑 ...
- 阿铭linux笔记
2015-09-06虚拟机网络设置.wmv: curl 获取在命令行显示的网页 dhclient 分配ip地址 ifdown eth0 关闭网卡eth0 ifup eh0 ...
- 函数:我的地盘听我的 - 零基础入门学习Python019
函数:我的地盘听我的 让编程改变世界 Change the world by program 函数与过程 在小甲鱼另一个实践性超强的编程视频教学<零基础入门学习Delphi>中,我们谈到了 ...
- MySQL查看当前连接数、连接数和最大连接数
MySQL查看当前所有连接的详细资料: mysqladmin -u root -p processlist MySQL查看当前连接数(Threads为连接数) mysqladmin -u root - ...
- memcached在Windows下的安装
memcached简介详情请谷歌.这里介绍如何在windows下安装. 1.下载 下载地址:http://download.csdn.net/detail/u010562988/9456109 ...