使用html制作圆弧正方形,CSS3圆角效果:从圆出发
话说,大家都知道如何使用CSS3画一个圆,那么有好多同学可能不知道,CSS3可以画半圆、四分之一圆以及四分之三圆。下面我们一起看一下如何实现吧!
技术点: CSS3圆角border-radius
1. 基本原理
通常,我们使用border-radius设置盒子四个圆角,其实,这四个圆角各自有单独的属性,可以单独设置的。如下表所示:
|No.|属性|作用|
|:-:|
|1|border-top-left-radius|左上角|
|2|border-top-right-radius|左下角|
|3|border-bottom-left-radius|右上角|
|4|border-bottom-right-radius|右下角|
我们使用的border-radius只是一个简写。这个简写与padding margin简写一样,有四种写法。
|No.|属性|作用|
|:-:|
|1|border-radius:半径;|四个角圆弧半径|
|2|border-radius:半径1 半径2;|左上和右下圆弧半径为半径1;左下和右上圆弧半径为半径2|
|3|border-radius:半径1 半径2 半径3;|左上圆弧半径为半径1;左下和右上圆弧半径为半径2;右下圆弧半径为半径3|
|4|border-radius:半径1 半径2 半径3 半径4;|左上圆弧半径为半径1;左下圆弧半径为半径2;右下圆弧半径为半径3;右上圆弧半径为半径4|
2. 半圆
半圆
如图上,上半圆只是把一个宽高比为2:1的矩形,只设置左上与右上角的圆角,圆弧半径等于矩形高度,即可。
代码如下:
HTML
CSS
.half-circle-top{
width:100px;
height:50px;
border-top-left-radius:50px;
border-top-right-radius:50px 50px;
background:#f00;
}
练习:如何做下半圆、左半圆与右半圆?
3. 四分之一圆
四分之一圆
如图上,左上四分之一圆只是把一个正方形,设置左上角的圆角,圆弧半径等于变长,即可。
代码如下:
HTML
CSS
.quarter-circle-top-left{
width:50px;
height:50px;
border-top-left-radius:50px;
background:#f00;
}
练习:如何做左下四分之一圆、右上四分之一圆与右下四分之一圆?
4. 四分之三圆
四分之三圆
如图上,上面会做的童鞋,看到这个图形觉得很难,其实只是一个上半圆与左下四分之三圆组合而成。思考方式决定解决方式。
代码如下:
HTML
CSS
.half-circle-top{
width:100px;
height:50px;
border-top-left-radius:50px;
border-top-right-radius:50px 50px;
background:#f00;
}
.quarter-circle-bottom-left{
width:50px;
height:50px;
border-bottom-left-radius:50px;
background:#f00;
}
练习:如何其他三种的四分之三圆吧?提示要用到浮动的喔
其他
圆头
如图上,是否觉得这个图不可能做到呢?这里需要使用一个CSS3转换(变形)属性transform,属性值中rotateZ函数表示以垂直电脑屏幕的Z轴为轴线旋转,参数-45deg是旋转角度,正值是瞬时值,负值是逆时针;deg是角度单位。
代码如下:
HTML
CSS
.round{
width:100px;
transform:rotateZ(-45deg);
}
.half-circle-top{
width:100px;
height:50px;
border-top-left-radius:50px;
border-top-right-radius:50px 50px;
background:#f00;
}
.quarter-circle-bottom-left{
width:50px;
height:50px;
border-bottom-left-radius:50px;
background:#f00;
}
以上,CSS3圆角的基本用法完成,其他用法敬请期待。
可参考CSS3制作各种形状图像,制作各种图形。
使用html制作圆弧正方形,CSS3圆角效果:从圆出发相关推荐
- 兼容所有浏览器的CSS3圆角效果
解决CSS3圆角兼容所有浏览器的方法.本文提到了一种很不错的实现跨浏览器圆角的解决方案. 前一段时间,我经常收到一个关于如何在IE浏览器中使用CSS3的border-radius属性实现圆角HTML元 ...
- 使用html制作圆弧正方形,圆角正方形三边圆弧化羽毛球拍的制作方法
本发明涉及一种羽毛球拍,尤其涉及一种圆角正方形三边圆弧化羽毛球拍. 背景技术: 现在公知的羽毛球拍的拍框有椭圆形和下椭圆上方头形两种,拍框重心距拍头距离都是125 mm±5%.力度小的人使用它击球力小 ...
- 使用html制作圆弧正方形,JavaScript+html5 canvas制作的圆中圆效果实例
本文实例讲述了JavaScript+html5 canvas制作的圆中圆效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: demo #canvas { background: ...
- css制作流程卡片,css3卡片效果制作代码实例
Insert title here /* 顶部的盒子 */ .container{ width:1320px; margin:50px auto; } /* 翻转类样式 */ .flip{ width ...
- 纯CSS3制作的圆角效果按钮菜单
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...
- html中的变圆的属性,CSS3属性之圆角效果——border-radius属性
在css3之前,要实现圆角的效果可以通过图片或者用margin属性实现(可以参考这里:http://www.hicss.net/css-practise-of-image-round-box/).实现 ...
- 使用css3的3D制作一个正方形
使用css3的3D制作一个正方形 首先我们来看效果 首先想要制作 3D的效果 最重要的是 css3 中的 transfom-style 属性, 它有2个属性 flat : 正常的平铺效果, prese ...
- 纯CSS3制作卡通场景汽车动画效果
前言 今天分享一下我昨晚做的CSS3动画效果--卡通场景汽车动画.在接触CSS3动画之前,我之前实现一些简单的动画效果都是使用flash完成的.但是自从CSS3横空出世,在移动端对CSS3动画的运用越 ...
- css3帮你轻松实现圆角效果,不一样的前端页面。
在Web前端页面实现圆角效果,CSS3帮你轻松实现,一个人人皆知的属性 圆角边框的绘制是Web页面和Web应用程序中经常用来美化页面效果的手法之一.今天,小编为大家介绍CSS3提供的可以将矩形变为圆角 ...
- CSS Animatie是一款在线制作CSS3动画的工具,可以在线直接制作CSS3动画效果,生成代码...
CSS Animatie是一款在线制作CSS3动画的工具,可以在线直接制作CSS3动画效果,生成代码 CSS Animatie 彩蛋爆料直击现场 CSS Animatie是一款在线制作CSS3动画的工 ...
最新文章
- 一年成为emacs高手
- Transaction And Lock--事务中使用return会回滚事务吗?
- UE4 使用VaRest的最佳实践
- elasticsearch -- head插件
- WTM系列视频教程:初体验
- 服务器维修工单,运维工单--服务器申请工单
- 【转】浏览器缓存机制
- 微信或手机浏览器在线显示office文件(已測试ios、android)
- vue.draggable的中文文档链接
- 导航条UIBarButtonItem添加图片,如何避免渲染
- 实现挂视频的三种方法
- 【古希腊罗马神话】期末结课论文
- 写给正在读计算机专业的同学: 大学期间该如何学习编程?
- 计算机英语发展,计算机发展史(英语版)
- pandas下-综合练习
- 304413存储过程和触发器
- Android解决分屏情况下背景拉伸问题
- mysql社工库搭建教程_社工库的搭建思路与代码实现
- 三类苹果开发者账号的区别
- 设置VMware workstation开启共享文件夹
热门文章
- linux centos无线网卡驱动安装,CentOS 6.5 安装无线网卡驱动实现无线上网
- 计算机百科丨存储介质发展史
- 简单Python爬取链接二手房信息
- 输出华氏温度用java_用JAVA写一个将华氏温度转换成摄氏温度的程序
- 自助图书馆系统-Tkinter界面和openpyxl表格综合设计案例
- oracle 11g查隐含参数,oracle隐含参数修改与查看
- “C:\Users\用户名\AppData\里面的文件是什么?可以删除么??
- 第22节 NAT(网络地址转换)—实现公网IP和私网IP之间的转换
- php 改变图片大小,如何把照片尺寸改小 电子照片尺寸怎么改
- 产品静电ESD测试标准