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. MM1排队系统

    #coding=utf-8 import time import random as rd #import math import pylab as pl def simulate(nameda,u) ...

  2. codeforces 425A Sereja and Swaps（模拟，vector，枚举区间）

    题目 这要学习的是如何枚举区间,vector的基本使用(存入,取出,排序等),这题的思路来自: http://www.tuicool.com/articles/fAveE3 //vector 可以用s ...

  3. POJ 1411

    #include<iostream> #include<stdio.h> #include<math.h> #define MAXN 50000 using nam ...

  4. editplus的各式插件

    C/C++, Java, JSP, C#, .NET, SQL, Pascal, Python, Assembly, Basic files http://www.editplus.com/javac ...

  5. 传说中的WCF（7）：“单向”&“双向”

    在WCF中,服务器与客户端的通讯有单向(单工)和双向(双工)之分.要说有什么形式上的表现,那就是单向与双向生成的SOAP不同,咱们先放下代码不说.但通常情况下,我们也不太需要去研究生成的SOAP是啥样 ...

  6. jquery 中$.post获取MVC Controller中JsonResult返回包含LIst<Model>类型的子List<Model>的高级使用方法

    比如JsonResult中返回return Json(models);的models结构如下: models返回含有四个集合的序列,每个集合的序列中又包含一个子集合序列“Child”. 问题是如果我们 ...

  7. 540B ：School Marks

    题目链接 题意: 输入: 第一个: n k p x y 第二行:k个数 n: 数的数量 k:n个数中已经知道的k个数 p:n个数取值的上界,下界是1 x:n个数的和的上界x y:n个数的中位数至少是 ...

  8. Grub命令行

    今天电脑无缘无故无法正常启动,只提示 GRUB> 看来是GRUB引导出问题了,要解决下. 先 想到用制作U盘启动盘来启动,参照网上的方法,很简单用USBBOOT软件做了一个U盘启动盘,按F11在 ...

  9. MAC 如何设置文件夹权限为777

    1. cd 你的文件夹路径的上一级目录. 2. sudo chmod -R 777 你的文件夹名. 3. 输入密码. 4.成功

  10. java多线程使用HibernateSession 时报 No session 的解决办法（转）

    服务端新开多线程使用HibernateSession 杜绝No session 新起的线程需要绑定Hibernate session,才能在新线程中使用事务和延迟加载等功能,否则会曝出no sessi ...