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,就是让不同浏览器显示相同的样式 ...
随机推荐
- php随机数怎么获取?一个简单的函数就能生成
小美女建了一个站,有些页面相似度比较高,想添加一些字段来实现差异化,比如用php随机数生成从10到100之间随机一个数字.其实会php的朋友几十个字符就能实现了,如下代码所示,简单吧?10代表最小值, ...
- Unity Texture 2D Compress
测试了一下 unity 图片 对 apk 的影响. 上两种测试环境 1024 * 1024 带 alpha的话 默认压缩就是RBA 16bit就是2M 不带的话就是 etc 的话 ...
- mysql触发器使用实例
DELIMITER $$ USE `db`$$ DROP TRIGGER `member_walletinit_trigger`$$ CREATE TRIGGER `member_walletinit ...
- 安装wine qq2012
添加软件源:vi /etc/apt/sources.list deb http://http.kali.org/kali kali main non-free contribdeb-src http: ...
- HDU4836 The Query on the Tree(树状数组&&LCA)
由于智力的问题,百度之星完全lu不动..开场看第一题根据题目给的条件我觉得一定是可以构造出来的,题目给的意思颇有鸽巢原理的感觉,于是觉得开场第一题应该就是智力构造题了,想了半个小时,发现完全想不动,于 ...
- POJ 3253 Fence Repair（优先队列，哈夫曼树，模拟）
题目 //做哈夫曼树时,可以用优先队列(误?) //这道题教我们优先队列的一个用法:取前n个数(最大的或者最小的) //哈夫曼树 //64位 //超时->优先队列,,,, //这道题的优先队列用 ...
- Unit4中的Annotation
Unit4中的Annotation(注解.注释) JUnit4 使用 Java 5 中的注解(annotation),以下是JUnit4 常用的几个annotation介绍@Before:初始化方法@ ...
- php用fsockopen实现post提交数据并获得返回数据
/** * 函数介绍: 用于post方式提交数据 * 输入参数: 完整url, 数据 * 返回值 : 接口返回值 */ function post_it($url, $data = '', $time ...
- angularJS之$watch、$digest和$apply方法
最近项目上使用了比较多的angular JS,一直都对它感觉比较陌生,总觉得有点反直觉,这段时间,准备下定决心弄明白,这个框架到底是怎么一回事,以及它的工作原理,生命周期……一点一点的啃完它吧.首先, ...
- VS 解决方案目录结构设置
涉及到的配置: 项目编译时使用的中间目录: 项目链接的输出目录: 项目编译结束后,拷贝生成的 dll 和 lib 到指定目录: 项目编译结束后,拷贝需要的 dll 到输出目录: 设置项目的工作目录: ...