用CSS来画圆
2015-10-07 21:40
666 查看
.circle { border-radius: 50%; width: 200px; height: 200px; /* 宽度和高度需要相等 */}
/* 动画定义 */ @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* 旋转,渐变色 */ #advanced { width: 200px; height: 200px; background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%); background-image: -webkit-radial-gradient(45px 45px, circle cover, yellow, orange); background-image: radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%); animation-name: spin; animation-duration: 3s; /* 3 seconds */ animation-iteration-count: infinite; animation-timing-function: linear; }
div{border-radius:5px}
设置DIV对象盒子四个角5像素圆角效果
div{border-radius:5px 0;}
设置DIV对象盒子左上角和右下角5px圆角,其它两个角为0不圆角
div{border-radius:5px 5px 0 0;}
设置DIV对象盒子左上角和右上角5px圆角,其它两个角为0不圆角
相关文章推荐
- Holder 可直接在客户端渲染图片的占位。支持在线和离线,提供一个链式 API 对图像占位进行样式处理。
- CSS 盒模型
- css选择器优先级
- 用css实现条纹背景
- css3 中的transition和transform
- css3
- 盘点8种CSS实现垂直居中水平居中的绝对定位居中技术
- CSS,基本语法
- CSS3——旋转方块
- 一个神奇却很简单的css特效
- gurnt js css 压缩合并
- css position 应用(absolute和relative用法)
- 行内脚本的位置放置----css阻塞行内脚本
- 纯CSS3实现常见多种相册效果
- CSS里面的长度单位px/pt/em/in/pc/mm/cm解释
- 纯CSS3实现常见多种相册效果
- CSS
- ProgressBar自定义样式
- 批量下载css文件中的图片
- box-sizing 属性