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的形式绘制出的毛玻璃背 ...
随机推荐
- 学习Java设计模式的10条建议
设计模式在整个Java的学习路线图中扮演着承上启下的作用. 在整个软件生命周期中,唯一不变的就是变化.设计模式就是要在软件设计.编码中对现有问题的一种总结,并从中寻求应对变化的策略. 自己初次接触设计 ...
- 解决Please ensure that adb is correctly located at 'D:\java\sdk\platform-tools\adb.exe' and can be executed.
遇到问题描述: 运行android程序控制台输出 [2012-07-18 16:18:26 - ] The connection to adb is down, and a severe error ...
- 教你如何选择Android游戏引擎
我们进行Android游戏开发时选择游戏引擎是必须的,但是该如何选择呢?哪个Android游戏引擎更加适合自己呢?本文就提供了三个游戏引擎的对比说明,阐述了它们各自的特点,为大家选择引擎提供了参照. ...
- 文件和目录之link、unlink、remove和rename函数
任何一个文件可以有多个目录项指向其i节点.创建一个指向现有文件的链接的方法是使用link函数. #include <unistd.h> int link( const char *exis ...
- js 三元运算符以及|| 和 && 测试
var a = '0';var b = a ? 'me':'hi'; console.log(b);//false 有: undefined , 0, '', false,null//true ...
- Apache rewrite 详解
用rewrite可实现的部分:URL根目录搬迁,多目录查找资源,阻止盗连你的图片,拒绝某些主机访问,基于时间重写,据浏览器类型重写,动态镜像远程资源,外部重写程序模板,等等 详见下表: 目标 重写设置 ...
- 浅谈iOS中的视图优化
引言: 让我们来思考几个问题,你开发过的产品,它还有可以优化的地方吗?能增加它的帧率吗?能减少多余的CPU计算吗?是不是存在多余的GPU渲染?业务这点工作量对于越来越强大的设备面前显得微不足道,但作为 ...
- AndroidStudio中安装可自动生成json实体类的jar包
第一步:安装gsonjar包, 这样gson包就下载好了.接下来安装能自动生成实体类的插件: 接下来不要忘了重启: 重启后,就可以通过自定义的快捷键 alt+shift+s来打开generate,从而 ...
- for循环里面的判断条件
先看下面这段代码,你很容易猜到结果 for(i=0;i<10;i++){ console.log(i); // 结果是打印出 1,2,3,4,5,6,7,8,9 } 再看一下这款代码,也许很容易 ...
- android webview乱码问题
使用 loadData方法是中文部分会出现乱码,即使指定“utf-8”.“gbk”.“gb2312”也一样. webView.getSettings().setDefaultTextEncodingN ...