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、边框背景：

边框图片 border-image
•border-image-sourceg 引入图片
•border-image-slice 切割图片
•border-image-width 边框宽度
•border-image-repeat 图片的排列方式
round 平铺,repeat 重复,stretch拉伸
边框颜色 border-colors
 

css新增UI样式的更多相关文章

  1. css选择器和新增UI样式总结

    经过两天的学习,初步对css3选择器和新增UI样式有了进一步的理解.

  2. css新增UI方案

    一.文本新增样式 opacity 不透明度 h1{ margin: 100px auto; opacity: 0.5; } </style> </head> <body& ...

  3. CSS3新增UI样式

    圆角,border-radius: 1-4个数字/1-4个数字,前面是水平,后面是垂直,不给“/”表示水平和垂直一样,举例如下: <head> <meta http-equiv=&q ...

  4. [原创]Lodop打印, 以及Lodop引用css文件控制打印样式的问题.

    最近在做Lodop打印功能: 思路是:  用MasterPage搭个打印页面的框架, 然后在具体的页面中填入数据, 打印的样式由母版页和CSS来控制. 困扰了一天的问题是:  在打印的JS文件中, 引 ...

  5. Css - 选择器和样式

    Css - 选择器和样式 标签选择器 即使用html标签作为选择对象 <style>     div{ background:red; } </style> <div&g ...

  6. amazeui学习笔记--css（基本样式4）--打印样式Print

    amazeui学习笔记--css(基本样式3)--打印样式Print 一.总结 1.打印显示url方法: 利用 CSS3 content 属性,将 <a> 和 <abbr> 的 ...

  7. amazeui学习笔记--css（基本样式3）--文字排版Typography

    amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非 衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...

  8. amazeui学习笔记--css（基本样式2）--基础设置Base

    amazeui学习笔记--css(基本样式2)--基础设置Base 一.总结 1.盒子模型:外margin,内padding,这里的内外指的边框 2.border-box:Amaze UI 将所有元素 ...

  9. amazeui学习笔记--css（基本样式）--样式统一Normalize

    amazeui学习笔记--css(基本样式)--样式统一Normalize 一.总结 1.统一浏览器默认样式: Amaze UI 也使用了 normalize.css,就是让不同浏览器显示相同的样式 ...

随机推荐

  1. 【回文字符串】 最长回文子串O(N) Manacher算法

    原理讲的清晰:Manacher's ALGORITHM: O(n)时间求字符串的最长回文子串 注意: ①动态生命P[]和newStr数组后,不要忘记delete[] //其实这是基本的编码习惯 ②最终 ...

  2. 为Form中的控件增加自适应功能 转

    创建一个基于Custom的类resizeable,并新建属性和方法程序,其说明如下: a) 新建属性: posiTyperList 可调整位置的控件类型列表sizeTypeList 可调整大小的控件类 ...

  3. Acdream1217 Cracking' RSA(高斯消元)

    题意:给你m个数(m<=100),每个数的素因子仅来自于前t(t<=100)个素数,问这m个数的非空子集里,满足子集里的数的积为完全平方数的有多少个. 一开始就想进去里典型的dp世界观里, ...

  4. POJ　３６７８

    Katu Puzzle Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 7391   Accepted: 2717 Descr ...

  5. POJ 2513 Colored Sticks （离散化+并查集+欧拉通路）

    下面两个写得很清楚了,就不在赘述. http://blog.sina.com.cn/s/blog_5cd4cccf0100apd1.htmlhttp://www.cnblogs.com/lyy2890 ...

  6. POJ 1477

    #include <iostream> #define MAXN 100 using namespace std; int _[MAXN]; int main() { //freopen( ...

  7. MySQL数据库优化总结

    对于一个以数据为中心的应用,数据库的好坏直接影响到程序的性能,因此数据库性能至关重要.一般来说,要保证数据库的效率,要做好以下四个方面的工作:数 据库设计.sql语句优化.数据库参数配置.恰当的硬件资 ...

  8. zoj 2290 Game 博弈论

    思路:HDU有过类似的题目,也就是谁面对FIB数,就处于必败状态. 再求第二问的时候要注意不一定要在一步之内就让对手处于必败状态,可以多步进行, 这个过程可以用递归实现. 代码如下: #include ...

  9. hdu 3590 PP and QQ 博弈论

    思路: 在贾志豪神牛的论文 里,这两种游戏都有 其中树的删边游戏:叶子节点的SG值为0:中间节点的SG值为它的所有子节点的SG值加1 后的异或和. ANTI-SG:先手必胜当且仅当:(1)游戏的SG函 ...

  10. android真机自动化测试

    appium执行用例时报错问题: 问题解析: 一般该种情况都是因为来连接了多个设备,验证办法:cmd->执行adb devices  看结果是否是多个devices ,如果是这个问题,停掉多余设 ...