CSS3 试试看

1. border-radius属性:

很好看的形状不再需要image来实现啦。。我们看看如何让一个DIV显示为不规则。并在里面存放一些文本。使用CSS3中的border-radius属性:


1

2

3

4

5

6

7

8

div

           {

               border: solid black;

               border-radius: 40px;

               height: 1in;

               width: 2in;

               overflow: hidden;

           }

 

div显示:

 

2.background-clip属性:

background=clip结合border-radius使用,可以设计出不错的形状。

Css:

两个div的显示:

3. border-x-x-radius属性

x代表top,right,left,bottom,想让哪边有圆角就可以把x设置为哪边,例如top-right就是右上角,top-left就是左上角,。。。。。,另外后面还可以添加百分比来设置圆角的显示弧度。

CSS:

效果:

 

4.background-clip+父子结构的div使用

CSS+Html:

效果:

5.圆角文本输入框

Css+Html:

效果:

 

6、CSS3使用border属性画圆画方:

Css+Html:

 

确实很强大,以后很多的图片都可以用CSS来取代了。。。。。。而且不需要为了一个圆角写那么多CSS和js了。

时间: 2024-09-26 15:41:53

CSS3 试试看的相关文章

5个使用CSS3实现的常见效果

用纯CSS也可以实现各种各样很酷的效果了,甚至是动画.虽然有些效果不能跨浏览器(甚至是支持CSS3的浏览器)运行,有些只是展示并没什么实际 用途, 但仅用CSS实现出的这些效果似乎没什么可以挑剔的. 对于设计人员和开发人员来说,CSS一直是web设计过程中重要的一部分,随着CSS3的出现以及越来越多的浏览器对它的支持,设计师们有了 更多的选择.用纯CSS也可以实现各种各样很酷的效果了,甚至是动画.虽然有些效果不能跨浏览器(甚至是支持CSS3的浏览器)运行,有些只是展示并没什么实际 用途, 但仅用

HTML5、CSS3、ASP.NET MVC4 WebAPI大锅烩

原文 http://www.cnblogs.com/newton/archive/2013/04/26/3043615.html 今日闲来无事,把玩了下传说中的HTML5.CSS3.ASP.NET MVC4,以及随之发布的WebAPI.不得不说,新鲜的知识点太多了,不可能按部就班地去学.参照网上的几篇文章,边看边做,搭建了一个简单的demo,现将一些要点记录下来. 首先从一个介绍CSS3的国外站点down了一个登录页(HTML5+CSS3构建同页面表单间的动画切换),做了简单修改后就成了下面这个

CSS3 3D 技术手把手教你玩转_表单特效

css3的3d起步 要玩转css3的3d,就必须了解几个词汇,便是透视(perspective).旋转(rotate)和移动(translate).透视即是以现实的视角来看屏幕上的2D事物,从而展现3D的效果.旋转则不再是2D平面上的旋转,而是三维坐标系的旋转,就包括X轴,Y轴,Z轴旋转.平移同理. 当然用理论来说明,估计你还不明白.下面是3个gif: 沿着X轴旋转 沿着Y轴旋转 沿着Z轴旋转 旋转应该没问题了,那理解平移起来就比较容易了,就是在在X轴.Y轴.z轴移动. 你可能会说透视比较不好理

使用CSS3实现的超酷幻灯图片效果

  在线演示 这个教程将介绍如何使用纯CSS创建一个干净的幻灯图片面板.主要想法是在面板中使用背景图片,然后在点击标签后使之动画. HTML标签 HTML主要包括了3个主要部分:radio按钮和标签,容器,及其标题,如下: <section class="cr-container">     <!-- radio buttons and labels -->  <input id="select-img-1" name="ra

惊现CSS3 filter

看了一篇文章,才开始知道原来不止IE才有filter,原来CSS3也有.这篇文章的链接:http://www.xuanfengge.com/css3-grayscale-black-and-white-filters.html 哈哈,顺便说一下,它的导航很酷哦,可以在上面弹钢琴. 首先,我先说它的兼容性.目前,似乎只有webkit支持(参考其它文章),其它内核通通不能实现.但是,不要被吓跑了,功能很强大滴,我觉得有了它PS的有些功能就可以不用啦. 然后,马上写了个demo体验了下.filter的

CSS复合选择器:css3让我们选择元素变得越来越简单

文章简介:使用css的类名交集复合选择器. 首先先看一下基本定义: 复合选择器就是两个或多个基本选择器,通过不同方式连接而成的选择器,主要包括"交集"选择器."并集"选择器."后代"选择器. 交集选择器 "交集"复合选择器是由两个选择器直接连接构成,其结果是选中二者各自元素范围的交集.其中第一个必须是标记选择器,第二个必须是类别选择器或者ID选择器.这两个选择器之间不能有空格,必须连续书写. 注意其中第一个必须是标记选择器,如

CSS3教程:使用@font

文章简介:我们经常能看到国外的一些个人网站使用了非常漂亮的字体,而这些字体通常在用户的电脑中是没有安装的,所以用font-family属性就无法实现了,今天我们就介绍使用@font-face实现个性化字体. 在网页中,我们可以用CSS的font-family属性来定义字体,然而定义的字体在用户的电脑上能否正确呈现则要看用户的电脑是否安装了该字体.我们经常能看到国外的一些个人网站使用了非常漂亮的字体,而这些字体通常在用户的电脑中是没有安装的,所以用font-family属性就无法实现了,今天我们就

CSS3灵活的盒子模型(Flexible Box Module)

CSS3 标准里引入了一些新的盒子模型参数,在 CSS2 的基础上,我们将能更灵活地调整页面上各个容器的大小和位置.详细的说明可以看这个文档. 通过学习和测试,我发现这种新的盒子模型布局对建立自适应布局的页面带来很大的好处.在这篇文章中,我的所有例子都基于以下 HTML代码: 以下为引用的内容: <body> <div id="box1">1</div> <div id="box2">2</div> <

用CSS3编程模仿iPhone中的返回按钮

  好像写这个有点晚了,iOS已经从拟物化的年代进化到了扁平化的年代,那些圆角+渐变+阴影的年代已经过去,不过在此仍然要去说下古老的iOS返回按钮. 在过去的年代,大家都以iOS的设计元素为自己移动版页面的设计元素;当中自然少不了经典的返回按钮,看着似乎非常简单的一个返回按钮,但是就是没有啥办法能用代码写出来似的,那个讨厌的三角箭头只能让前端工程师无奈的使用一张图片来拼接(如淘宝.天猫.百度.美团都是图片处理方式);或者就根本不用那个按钮(如Yahoo.Google.Facebook根本就不用)