css新增UI样式
1、圆角
border-radius
<style>
.box{width:200px;height:300px;border:1px solid #000;border-radius:100px/150px; /*椭圆 x/y: x轴半径/y轴半径*/}
</style>
</head>
<body>
<div class="box"></div>
</body>
<style>
.box{width:200px;height:300px;border:1px solid #000;border-radius:50%;}
</style>
</head>
<body>
<div class="box"></div>
</body>
<style>
.box{width:200px;height:200px;border:1px solid #000; border-radius:20px 40px 60px 80px/10px 20px 30px 40px; /*斜杠前为x轴半径，斜杠后为y轴半径*/}
</style>
</head>
<body>
<div class="box"></div>
</body>
2、风车例子：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{width:400px;height:400px;margin:50px auto; transition:5s linear;}
.box div{width:180px;height:180px;margin:10px;border:1px solid #000; box-sizing:border-box;float:left;background:pink;}
.box div:nth-child(1),.box div:nth-child(4){ border-radius:0 70%;}
.box div:nth-child(2),.box div:nth-child(3){ border-radius:70% 0;}
.box:hover{ -webkit-transform:rotate(720deg);}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
3、边框背景：
css新增UI样式的更多相关文章
- css选择器和新增UI样式总结
经过两天的学习,初步对css3选择器和新增UI样式有了进一步的理解.
- css新增UI方案
一.文本新增样式 opacity 不透明度 h1{ margin: 100px auto; opacity: 0.5; } </style> </head> <body& ...
- CSS3新增UI样式
圆角,border-radius: 1-4个数字/1-4个数字,前面是水平,后面是垂直,不给“/”表示水平和垂直一样,举例如下: <head> <meta http-equiv=&q ...
- [原创]Lodop打印, 以及Lodop引用css文件控制打印样式的问题.
最近在做Lodop打印功能: 思路是: 用MasterPage搭个打印页面的框架, 然后在具体的页面中填入数据, 打印的样式由母版页和CSS来控制. 困扰了一天的问题是: 在打印的JS文件中, 引 ...
- Css - 选择器和样式
Css - 选择器和样式 标签选择器 即使用html标签作为选择对象 <style> div{ background:red; } </style> <div&g ...
- amazeui学习笔记--css（基本样式4）--打印样式Print
amazeui学习笔记--css(基本样式3)--打印样式Print 一.总结 1.打印显示url方法: 利用 CSS3 content 属性,将 <a> 和 <abbr> 的 ...
- amazeui学习笔记--css（基本样式3）--文字排版Typography
amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非 衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...
- amazeui学习笔记--css（基本样式2）--基础设置Base
amazeui学习笔记--css(基本样式2)--基础设置Base 一.总结 1.盒子模型:外margin,内padding,这里的内外指的边框 2.border-box:Amaze UI 将所有元素 ...
- amazeui学习笔记--css（基本样式）--样式统一Normalize
amazeui学习笔记--css(基本样式)--样式统一Normalize 一.总结 1.统一浏览器默认样式: Amaze UI 也使用了 normalize.css,就是让不同浏览器显示相同的样式 ...
随机推荐
- const int *p与int *const p的区别（转：csdn，suer0101）
本文只是一篇学习笔记,是看了<彻底搞定C指针>中的相关篇幅后的一点总结,仅此而已! 一.先搞清const int *p与int const *p的区别 它们的区别就是:没有区别!! 无论谁 ...
- JavaScript创建命名空间、类及类成员
JavaScript代码: //为String对象增加方法isNullOrEmpty String.isNullOrEmpty = function (a) { if (a != null & ...
- 分布式数据存储-MySQL主从复制
前言 一.主从复制过程 MySQL的主从复制能力是通过三个线程来实现的,两个在Slave端的I/O和SQL两个线程,还有一个在Master端I/O线程: Binlog dump thread:Mast ...
- php接收数据
http://lpladdyy.blog.163.com/blog/static/133999664201010264264585/ PHP默认只识别application/x-www.form-ur ...
- iOS导航栏-关闭半透明
self.navigationController.navigationBar.translucent = NO;
- ExtJs之Ext.form.field.TimePicker DatePicker组合框
<!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv ...
- mysql 连接数的最大数
mysql默认最大连接数是100,增加加默认MYSQL连接数的方法有两个 方法一:进入MYSQL安装目录 打开MYSQL配置文件 my.ini(windows) 或 my.cnf(linux环境)查找 ...
- spring PropertyPlaceholderConfigurer 找不到配置文件原因
1: spring 版本问题 参见: http://www.cnblogs.com/alex-blog/archive/2012/12/25/2832357.html 2: bean id 同名 ...
- JavaPersistenceWithHibernate第二版笔记-第五章-Mapping value types-007UserTypes的用法(@org.hibernate.annotations.Type、@org.hibernate.annotations.TypeDefs、CompositeUserType、DynamicParameterizedType、、、)
一.结构 二.Hibernate支持的UserTypes接口 UserType —You can transform values by interacting with the plain JD ...
- CentOS启动和停止服务详解
服务简介Linux 系统服务是在Linux启 动时自动加载,并在Linux退出时自动停止的系统任务.在Linux 启动过程中,我们可以看得很多“starting … ”提示信息,该信息表示正在启动系统 ...