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. 编写单例的 dojo class

    define([ "dojo/_base/declare" ],function( declare ){ var TimeChartService = declare(" ...

  2. ECMAScript 5.1中对属性的操作

    此操作只针对新版本浏览器. Object.defineProperty(obj,'name',{configurable:true/false,enumberable:true/false,value ...

  3. 【linux】文字提取

    提取IP地址: 方法①: ifconfig eth3|grep Bcast|cut -d ":" -f2|cut -d " " -f1 ifconfig: 显示 ...

  4. Struts2 Convention插件的使用（1）

    刚刚查阅官方文档(convention-plugin.html)并学习了Struts2的Convention插件,文章这里只作为一个笔记,建议大家去看官方文档比较清晰和全面. 需要在项目添加这些包 c ...

  5. 浅谈Spark Kryo serialization

    原创文章,转载请注明: 转载自http://www.cnblogs.com/tovin/p/3833985.html 最近在使用spark开发过程中发现当数据量很大时,如果cache数据将消耗很多的内 ...

  6. javamail邮件中插入图片

    转载 http://duanmumu.blog.163.com/blog/static/1911133502012715104016481/ // TODO Auto-generated method ...

  7. android中使用html作布局文件

    在android开发中,通常使用xml格式来描述布局文件.就目前而言,熟悉android布局及美化的人员少之又少,出现了严重的断层.大部分企业,其实还是程序员自己动手布局.这样既浪费时间和精力,也未必 ...

  8. [转]应聘Java,jsp,j2ee软件工程师笔试中可能出现的问题

    相信大家应聘的时候第一关就是笔试,即使是一位很有经验的工程师也不一定能够顺利通过,笔试不好,可能就无法进行面试,即使能够进行面试,考官对你的印象也不会很好,问的问题也会很多,估计很难吃的消,当然如果你 ...

  9. 302. Smallest Rectangle Enclosing Black Pixels

    题目: An image is represented by a binary matrix with 0 as a white pixel and 1 as a black pixel. The b ...

  10. Linux 关机命令详解

    在linux下一些常用的关机/重启命令有shutdown.halt.reboot.及init,它们都可以达到重启系统的目的,但每个命令的内部工作过程是不同的,通过本文的介绍,希望你可以更加灵活的运用各 ...