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,就是让不同浏览器显示相同的样式 ...
随机推荐
- Linux中yum和apt-get用法及区别
Linux中yum和apt-get用法及区别 一般来说著名的linux系统基本上分两大类: 1.RedHat系列:Redhat.Centos.Fedora等 2.Debian系列:Debi ...
- 表单很多数据项录入的时候，提交controller发生异常，数据回显。
1.添加的情况(Model传递Form Data) request.getSession().setAttribute("car", car); //抛出异常的时候,数据回显. 2 ...
- Sqli-labs less 54
第四部分/page-4 Challenges Less-54 此系列主要是一个进阶的学习,将前面学到的知识进行更深次的运用.这一关我们主要考察的依旧是字符型注入,但是只能尝试十次.所以需要在尝试的时候 ...
- ASP 中调用函数关于Call使用注意的问题
Function TestFun(Tstr) TStr = "Fun2" End Function Sub TestSub(TStr) Tstr = "Sub2" ...
- 在Jmeter中使用自定义编写的Java测试代码
我们在做性能测试时,有时需要自己编写测试脚本,很多测试工具都支持自定义编写测试脚本,比如LoadRunner就有很多自定义脚本的协议,比如"C Vuser","Java ...
- 数组使用find查询用法
#include "stdafx.h"#include <string>#include <list>#include <algorithm># ...
- 20个最受欢迎的Linux命令
http://code.csdn.net/news/2819566 1. 以 root 帐户执行上一条命令 sudo !! 2. 利用 Python 搭建一个简单的 Web 服务器,可通过 ht ...
- MyBatis学习总结_04_解决字段名与实体类属性名不相同的冲突
一.准备演示需要使用的表和数据 CREATE TABLE orders( order_id INT PRIMARY KEY AUTO_INCREMENT, order_no VARCHAR(20), ...
- Linux系统下如何禁止ping命令或允许ping命令的方法
1.禁止pingecho 1 >/proc/sys/net/ipv4/icmp_echo_ignore_all 2.允许ping echo 0 >/proc/sys/net/ipv4/ic ...
- WEB前端介绍
1.WEB前端是神马 Web前端开发是从网页制作演变而来的,名称上有很明显的时代特征.在互联网的演化进程中,网页制作是Web1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行为也以浏览为 ...