css画圆

用css3的border-radius属性
右上角的1/4个圆
border-top-right-radius:100%;
左上角的1/4个圆圈
border-top-left-radius:100%
右下角的1/4个圆
border-bottom-right-radius:100%;
左下角的1/4个圆圈
border-bottom-left-radius:100%

圆则是50%；

时间： 2024-11-05 19:06:01

css画圆的相关文章

CSS画圆角

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div{ width:300px; height:300px; border:1px solid red; } </style> </head> <body>

近几天,在利用css编辑中,发现不少边框图像要求是矩形圆角或者直接画一个圆的例子,下面和大家一起分享下对画圆的看法. 在这次的分享中,我侧重给大家看一些例子来更好的理解, 我们都明白,画圆时要用到“border-radius:”,而且在每次画圆时,我们都应该先设定一个width和height. 那么我们可以这样理解, 我们的圆是在一个矩形(正方形)中进行裁剪的,而border-radius就是我们要裁剪的尺寸. 给大家一些图片,更好的去理解. 首先,我们设定一个width为100px,高度为10

用css画图标

css3的属性 transform(转换) 用途很广泛,功能也很强大,为了熟悉它的各种转换方式(平移 translate,旋转 rotate,扭曲 skew,放缩 scale),我做了一些平常常用的一些简单的图标. 这些图标很多是通过三角形来拼贴起来的,所以我们需要知道怎么样画三角形. 1. 我们要将该 div 的 width 和 height 都设置为 0,三角形是通过 border 来实现: 2. 通过我们需要画成的三角形的目标分析,这个三角形的朝向(只针对规则的朝向:上.右.下.左.上左.

css 画爱心

用css画爱心,虽然这样的方法会写很多的css代码,但是做成功之后,会有一种很满足的成就感. 爱心,可以有3个常规的几何图形形成,一个正方形加两个相同半径的圆或半圆.一个等腰三角形加两个圆,两个房型叠加,都行. 我的实现方法是选择最简单的一个正方形加两个相同半径的圆.首先创建一个类名为heart的div,然后为其固定宽度,高度,和背景颜色.接着通过伪类选择器:before和:after添加content:''; 规定其宽度和高度都为之前的div的高度,背景颜色与之前的div相同,通过一个大于高度

用Windjs画圆

无意中接触了jscex,也就是Wind.js的前身,深深被它和它的作者老赵吸引.该轻量级js库是为了实现异步编程所设计的,可能因为eval的种种不安全因素或者应用不是很广的原因至今也没很大程度上的推广,从github上来看代码也已经两年多没更新了,但是还是有必要写几个小的demo的,毕竟下份需要阅读的代码中有用到该类库. 先写个canvas上画圆的demo. 等等,画圆?开玩笑,arc简单搞定!那么,要是不用h5的api自己来写这个函数呢?动手画了下感觉还是蛮easy的: 1 <!DOCTYPE

纯CSS画几何图形

<!doctype html> <html> <head> <meta charset="utf-8"> <title>纯CSS画几何图形</title> </head> <body>  <div style="width:100px; height:100px; border-width:20px; border-style:solid

openlayers实现画圆

概述: 本文讲述如何在openlayers中实现画圆. 效果: 实现思路: 1.画中心点通过OpenLayers.Control.DrawFeature和OpenLayers.Handler.Point实现在地图上画圆心. 2.移动鼠标设置半径画点结束后,激活地图的鼠标移动事件,获取圆心到鼠标点的距离,并画圆,将结果展示到地图上. 3.点击地图结束绘制点击地图,结束绘制,将最终结果展示到地图上,并停止地图的鼠标移动事件. 实现代码: <html xmlns="http://www.w

利用 html+css 画同心圆（concentric circles）——绝对布局

一.css 绘制圆 1 2 #circle { 3 width: 300px; 4 height: 300px; 5 background-color: #000000; 6 border-radius: 300px; 7 } key: 1.width = height 相当于画一个正方形 2.border-radius > 0.5*width (border-radius:圆角半径 ) 二.absolute构成同心圆绘制外面的圆: 1 #exCircle{ 2

前端入门之CCS 2 选择器优先级,调节标签样式,字体属性,文本属性,背景, 边框,画圆,display属性,盒子模型,浮动(clear属性),溢出属性,定位,z-index,透明度

选择器的优先级问题 1.选择器相同就近原则 2.选择器不同行内 > id选择器 > 类选择器 > 标签选择器除此之外还可以通过添加 !important方式来强制让样式生效,但并不推荐使用.因为如果过多的使用!important会使样式文件混乱不易维护. 万不得已可以使用!important <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8