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. 8086CPU各寄存器的用途

    8086 有14个16位寄存器,这14个寄存器按其用途可分为(1)通用寄存器.(2)指令指针.(3)标志寄存器和(4)段寄存器等4类. 1.通用寄存器有8个, 又可以分成2组,一组是数据寄存器(4个) ...

  2. 数据库表 copy

    db1为原数据库,db2为要导出到的数据库,fromtable 是要导出的表名 1.方法一:登录导出到的数据库,执行create table fromtable select * from db1.f ...

  3. 【面试题042】翻转单词顺序VS左旋转字符串

    [面试题042]翻转单词顺序VS左旋转字符串 题目一:     输入一个英文句子,反转句子中单词的顺序,但单词内字符的顺序不变.为简单起见,标点符号和普通字母一样处理.     例如输入字符串“I a ...

  4. POJ1474 Video Surveillance(半平面交)

    求多边形核的存在性,过了这题但是过不了另一题的,不知道是模板的问题还是什么,但是这个模板还是可以过绝大部分的题的... #pragma warning(disable:4996) #include & ...

  5. iOS KVC,KVO

    链接(写得不错,着重kvc):http://www.cocoachina.com/industry/20140224/7866.html 链接:http://www.cnblogs.com/kensh ...

  6. POJ 2021

    #include <iostream> #include <string> #include <algorithm> #define MAXN 105 using ...

  7. Linux网络编程4——个人总结

    TCP与UDP通信流程 TCP通信的基本步骤如下: 服务端:socket---bind---listen---while(1){---accept---recv---send---close---}- ...

  8. linux下文件编码的查看与修改

    在Linux中查看文件编码可以通过vim编辑器来查看,在vim命令模式下输入如下命令即可: :set fileencoding //在vim中查看文件编码 如果你只是想查看其它编码格式的文件或者想解决 ...

  9. vim中如何引用自定义模板文件

    我们在使用vim新建文件时可以引用自定义模板,来避免重复的数据格式处理花费太多时间. 实现方法很简单,只需要2步即可:1. 在.vim/template目录放入自己的模板文件(如shellconfig ...

  10. 重温《js权威指南》 第7，8章

    第七章 数组         数组是值的有序集合.js数组是无类型的,数组元素可以是任意类型,同一个数组中不同元素也可能有不同的类型.数组可以动态增长或缩减,创建时无须生命那个一个固定的大小并且数组大 ...