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的更多相关文章

  1. CSS3中的动画效果记录

    今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...

  2. img及父元素(容器)实现类似css3中的background-size:contain / background-size:cover

    img及父元素(容器)实现类似css3中的background-size:contain / background-size:cover <!DOCTYPE html> <html ...

  3. CSS3中惊艳的gradient

    以前曾经记录过linear-gradient(线性渐变)和 radial-gradient(径向渐变)的语法. 可以参考<CSS3中border-radius.box-shadow与gradie ...

  4. CSS3中flexbox如何实现水平垂直居中和三列等高布局

    最近这些天都在弥补css以及css3的基础知识,在打开网页的时候,发现了火狐默认首页上有这样一个东西.

  5. css3中动画(transition)和过渡(animation)详析

    css3中动画(transition)和过渡(animation)详析

  6. CSS3中的动画功能(一)

    css3中的动画功能分为transitions功能和animations功能,这两种功能都可以通过改变css属性值来产生动画效果.今天带大家一起来看看css3动画功能中的transitions的用法. ...

  7. CSS3中的变形处理

    在css3中,可以利用transform功能来实现文字或者图像的旋转.缩放.倾斜.移动这四种类型的变形处理. 旋转 旋转功能使用rotate方法参数中加入角度值,方向为顺时针旋转.示例清单如下: &l ...

  8. CSS3中的变形与动画【转】

    最近在学习制作移动端的页面,做了一个微信页面的小demo,其中用到了很多的CSS3新增的内容,其中就有CSS3新增的变形和动画.其实这种CSS3的动画效果用JS也可以实现,不过CSS3能开启硬件加速, ...

  9. CSS3中毛玻璃效果的使用方法

    今天在使用icloud的时候看到苹果icloud官网的毛玻璃效果非常赞,仔细研究了一下它的实现方式,是使用js配合background-image: -webkit-canvas的形式绘制出的毛玻璃背 ...

随机推荐

  1. Codeforces Round #319 (Div. 1) C. Points on Plane 分块

    C. Points on Plane Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/576/pro ...

  2. android内核读取file文件

    内核读取file文件的方法: char* file_read(const char * file_path) { struct file *file = NULL; //保存打开文件的文件指针变量 s ...

  3. Web应用Word生成

    前段时间接到一个Web应用自己主动生成Word的需求,现整理了下一些关键步骤拿来分享一下. 思路:(注:这里仅仅针对WORD2003版本号.其他版本号大同小异.) 由于WORD文件内部的数据及格式等是 ...

  4. Gaussian Discriminant Analysis

    如果在我们的分类问题中,输入特征$x$是连续型随机变量,高斯判别模型(Gaussian Discriminant Analysis,GDA)就可以派上用场了. 以二分类问题为例进行说明,模型建立如下: ...

  5. java_Cookies_1_商品浏览历史记录servlet1

    public class CookiesServlet1 extends HttpServlet { public void doGet(HttpServletRequest request, Htt ...

  6. php使用mysql_query查询超大结果集超内存的解决方法

    再使用mysql_query查询超大结果集的时候会出现超出内存限制的致命错误,这是因为mysql_query采用的是查询全部结果然后把结果集全部缓存到内存中的方式. mysql的查询还提供了另外一种查 ...

  7. javascript深度克隆与javascript的继承实现

    1.javascript深度克隆: //注意这里的对象包括object和array function cloneObject(obj){ var o = obj.constructor === Arr ...

  8. Quartus II 11.0 开始使用

    一.Altera Quartus II 11.0套件介绍 所谓巧妇难为无米之炊,再强的软硬件功底,再多的思维创造力,没有软件的平台,也只是徒劳.因此,一切创造的平台——Quartus II 软件安装, ...

  9. nyoj 86 找球号(一)

    找球号(一) 时间限制:3000 ms  |            内存限制:65535 KB 难度:3   描述 在某一国度里流行着一种游戏.游戏规则为:在一堆球中,每个球上都有一个整数编号i(0& ...

  10. 301页面转向 php

    新建301.php页面,在程序入口文件index.php引用301.php页面 301.php内容如下,仅用于参考: <?php$the_host = $_SERVER['HTTP_HOST'] ...