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. Win8 安装Oracle 10g 提示“程序异常终止”的解决方案

    这段时间在做DRP,需要安装Oracle 10g的数据库,我的系统是win8企业版,安装Oracle 10g的时候,选择“高级安装”,提示“程序异常终止”,下面是几个解决方案,跟大家分享一下. 错误提 ...

  2. delphi 连接mysql

    Delphi连接MySQL真麻烦,研究了一天,从网上找了无数文章,下载了无数插件都没解决.最后返璞归真,老老实实用ADO来连接,发现也不是很顺利,但最终还是连接成功了.多少有点心得:ADO各个组件的作 ...

  3. SQL Sever——无法连接到(local)。“未配置远程连接”和“请求失败或服务未及时响应”

       攻克了上篇博客提到的"远程过程调用失败(0x800706be)"的问题. 新的问题接踵而至. . . 一.       watermark/2/text/aHR0cDovL2 ...

  4. IOS - 常用宏定义和功能方法

    可能不定期添加新的东西 github地址:https://github.com/yuqingzhude/CommonUseDemo /************************Tools**** ...

  5. yii 数据库迁移

    在我们开发程序的过程中,数据库的结构也是不断调整的.我们的开发中要保证代码和数据库库的同步.因为我们的应用离不开数据库.例如: 在开发过程中,我们经常需要增加一个新的表,或者我们后期投入运营的产品,可 ...

  6. window.top、window.parent

    iframe和frameset中可能会用到window.parent.window.top 其中window.parent是相对于打开子页面的当前js所在页面的层级: 例如:a页面中包含一个ifram ...

  7. 读取Log日志并打印到sdcard

    @SuppressLint("SimpleDateFormat") private static SimpleDateFormat sdf = new SimpleDateForm ...

  8. 利用iOS8新特性计算cell的实际高度

    在计算cell的实际高度是 我们一般是通过计算frame  拿到最底部一个控件的最大Y值从而的到cell 的高度  算来算去  比较麻烦 其实,iOS8已经提供了直接通过Cell高度自适应的方法了,根 ...

  9. 快速集成图片浏览器快速集成图片浏览器->MJPhotoBrowser的使用

    介绍: 一个比较完整的图片浏览器,高仿了新浪微博的图片浏览效果,功能包括:下载浏览互联网图片,点击缩略图全屏显示图片.当加载较大图片时会出现圆形进度条,滑动浏览所有图片.保存图片到本地相册.GIF图片 ...

  10. javascript数据结构和算法[转]

    字符串表示的数组 join() 和 toString() 函数返回数组的字符串表示.这两个函数通过将数组中的元素用逗号分隔符分割,返回字符串数组表示. 这里有个例子: var names = [&qu ...