demo_01 css3中的radius
css属性：border-radius ；border：边框；radius：弧度；所以这个属性的意思很明了。
下面实现一个小demo：
<!doctype html>
<html>
<head>
<title>这里是标题的内容</title>
<meta charset="utf-8"/><!--定义浏览器解析的方式-->
<style rel="stylesheet" type="text/css">
#box{
width:200px;
height:200px;
border-radius:100px;
background:red;
}
</style>
</head>
<body>
<div id="box">实现一个圆形</div>
</body>
</html>
===================================================================
用css属性去除导航栏多余的边框，示例：
<!doctype html>
<html>
<head>
<title>这里是标题的内容</title>
<meta charset="utf-8"/><!--定义浏览器解析的方式-->
<style rel="stylesheet" type="text/css">
ul{
list-style:none;
}
li{
width:50px;
height:20px;
border-right:1px solid red;
background:blue;
}
li:last-child{
border:none;
}
</style>
</head>
<body>
<ul>
<li>导航栏内容</li>
<li>导航栏内容</li>
<li>导航栏内容</li>
<li>导航栏内容</li>
</ul>
</body>
</html>
demo_01 css3中的radius的更多相关文章
- CSS3中的动画效果记录
今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...
- img及父元素(容器)实现类似css3中的background-size:contain / background-size:cover
img及父元素(容器)实现类似css3中的background-size:contain / background-size:cover <!DOCTYPE html> <html ...
- CSS3中惊艳的gradient
以前曾经记录过linear-gradient(线性渐变)和 radial-gradient(径向渐变)的语法. 可以参考<CSS3中border-radius.box-shadow与gradie ...
- CSS3中flexbox如何实现水平垂直居中和三列等高布局
最近这些天都在弥补css以及css3的基础知识,在打开网页的时候,发现了火狐默认首页上有这样一个东西.
- css3中动画(transition)和过渡(animation)详析
css3中动画(transition)和过渡(animation)详析
- CSS3中的动画功能（一）
css3中的动画功能分为transitions功能和animations功能,这两种功能都可以通过改变css属性值来产生动画效果.今天带大家一起来看看css3动画功能中的transitions的用法. ...
- CSS3中的变形处理
在css3中,可以利用transform功能来实现文字或者图像的旋转.缩放.倾斜.移动这四种类型的变形处理. 旋转 旋转功能使用rotate方法参数中加入角度值,方向为顺时针旋转.示例清单如下: &l ...
- CSS3中的变形与动画【转】
最近在学习制作移动端的页面,做了一个微信页面的小demo,其中用到了很多的CSS3新增的内容,其中就有CSS3新增的变形和动画.其实这种CSS3的动画效果用JS也可以实现,不过CSS3能开启硬件加速, ...
- CSS3中毛玻璃效果的使用方法
今天在使用icloud的时候看到苹果icloud官网的毛玻璃效果非常赞,仔细研究了一下它的实现方式,是使用js配合background-image: -webkit-canvas的形式绘制出的毛玻璃背 ...
随机推荐
- hdu 4044 GeoDefense （树形dp | 多叉树转二叉树）
题目链接:hdu-4044 题意 这是一个塔防游戏,地图是一个n个编号为1-n的节点的树, 节点1是敌人的基地,其他叶子节点都是你的基地. 敌人的基地会源源不断地出来怪兽,为了防止敌人攻进你的基 ...
- [原创]oracle 顺序号生成函数。仿Sequence
问题提出自项目中的老代码:一个Bill表,存储所有的表单信息,比如:员工入职单,离职单等等.(别喷,我知道要分多个表.但领导的意愿你是没办法违背的)表单的单据号是以四个字母+年月日+数字顺序号来表示. ...
- android 开源 OCR 项目 及手写识别
http://blog.csdn.net/archfree/article/details/6023676 1)一个为Android平台,将识别由手机的相机拍摄的图像文本应用程序. http://co ...
- 一个小例子讲讲jsonp
1.何为jsonp(json with padding) json我们都知道并用过.那么jsonp呢,呃,好像听过,但没用过.很久以来楼主也只是听过这个名词而已.直到今晚楼主看到一篇文章(http:/ ...
- CSS3——选项卡切换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- linux系统学习(常用命令)
今天调休,闲来无事,研究一下linux系统. Linux常用命令: 一:文件管理 ctrl+alt:在虚拟机与windows之间切换ctrl+g:进入linux输入模式 pwd:查看当前目录 ls:列 ...
- 关于MyBatis的工作流程
1.从一个jdbc程序开始 public static void main(String[] args) { Connection connection = null; PreparedStateme ...
- ADC及DA的头文件复析
/************************************************************* ADC12,,,,这么多的定义,搞得我都昏死啦,抽出来可能好几一些..** ...
- php gd 生成日历图
<?php //如果您提交了时间则显示您提交年月的日历,否则显示当前月份日历 if (isset($_GET['month']) && isset($_GET['year'])) ...
- 转：Unity3D的四种坐标系
World Space(世界坐标):我们在场景中添加物体(如:Cube),他们都是以世界坐标显示在场景中的.transform.position可以获得该位置坐标. Screen Space(屏幕坐标 ...