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. dedecms还原数据时要选对备份目录 不然会提示function文件出错

    小李子最近在学习dedecms,在网上下载了一个二次开发的系统,顺利安装后想要还原一下作者的备份数据,可一直没有成功,让ytkah查看一下什么情况.进到后台,点击还原,提示/e/class/funct ...

  2. Sqli-labs less 19

    Less-19 从源代码中我们可以看到我们获取到的是HTTP_REFERER 那和less18是基本一致的,我们从referer进行修改. 还是像less18一样,我们只给出一个示例 将referer ...

  3. ZOJ3724 Delivery(树状数组？？)

    题意:给你一个有向图,第一类边是从第i个点到第i+1个点的,还有多出来的m条二类边,是从u到v的,同样是有向的.然后你要处理询问,从u到v经过最多一次二类边的最短距离是多少. 题目我觉得是神题,然后看 ...

  4. POJ 2464 Brownie Points II （树状数组，难题）

    题意:在平面直角坐标系中给你N个点,stan和ollie玩一个游戏,首先stan在竖直方向上画一条直线,该直线必须要过其中的某个点,然后ollie在水平方向上画一条直线,该直线的要求是要经过一个sta ...

  5. ExtJs尝下鲜

    感觉进入了一个新天地. WIN时代的API + 浏览器的窗口. 复古风了? 真的是好多年前还有点印象的DELPHI及MFC啊. <!DOCTYPE html> <html> & ...

  6. sql openxml sp_xml_preparedocument xml 中文乱码

    DECLARE @xmlText xml ,@idoc int set @xmlText = (select doc from openrowset(bulk 'C:\Word\SRC\WebApp\ ...

  7. lintcode:二叉树的路径和

    题目 给定一个二叉树,找出所有路径中各节点相加总和等于给定 目标值 的路径. 一个有效的路径,指的是从根节点到叶节点的路径. 解题 下面有个小bug 最后比较的时候是叶子节点为空,左右都有叶子结点,所 ...

  8. MySQL定义外键的方法

    MySQL定义外键的方法是每个学习MySQL的人都需要掌握的知识,下文就对MySQL定义外键的语句写法进行了详细的阐述,供您参考. 外键为MySQL带来了诸多的好处,下面就为您介绍MySQL定义外键的 ...

  9. iOS CoreMotion框架（传感器）

    我们知道iOS的应用真的太多了,很多应用让我们惊叹不已!!!很多意想不到的应用! 比如: 1.电子罗盘指南针之类的应用-让我们知道方向. 2.运动类型软件-让我们知道我们跑步多少公里. 3.社交软件中 ...

  10. Java：基本数据类型包装类

    基本数据类型对象包装类    基本数据类型(关键字)   引用数据类型(类)          byte                          Byte          short   ...