css html实现红色圆点,css3实现圆点

效果：

CSS：

.dot {

width: 14px;

height: 14px;

font: 12px/18px Arial;

border-radius: 7px;

display: inline-block;

vertical-align: middle;

position: relative;

box-shadow: 0px 1px 0px rgba(0,0,0,0.3);

background: -moz-linear-gradient(top, #18345d 0%,#6d8390 100%); /*Firefox*/

background: -webkit-gradient(linear, 0 0, 0 100%, from(#18345d), to(#6d8390)); /*Chrome,Safari*/

background: -o-linear-gradient(top, #18345d 0%,#6d8390 100%); /*Opera*/

}

.dot:before {

content: "";

width: 12px;

height: 12px;

border-radius: 6px;

display: inline-block;

margin: 1px 0 0 1px;

background: -moz-linear-gradient(top, #fff 0%,#5da2db 30%,#fff 100%); /*Firefox*/

background: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), color-stop(30%, #5da2db), color-stop(100%, #fff)); /*Chrome,Safari*/

background: -o-linear-gradient(top, #fff 0%,#5da2db 30%,#fff 100%); /*Opera*/

}

.dot:after {

content: "";

display: block;

width: 4px;

height: 4px;

border-radius: 2px;

position: absolute;

top: 50%;

left: 50%;

margin: -2px 0 0 -2px;

background: #143345;

}

html：

这是demo

原文：http://www.cnblogs.com/k13web/p/4139393.html

css html实现红色圆点,css3实现圆点相关推荐

html让圆点闪烁,利用jQ CSS3实现圆点闪烁背景动效
特效描述:利用jQ CSS3实现圆点闪烁背景动效.利用jQ CSS3实现圆点闪烁背景动效代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 $(document).ready(fun ...
CSS学习笔记 01、CSS3基础知识学习
文章目录前言 CSS3基本了解如何学习? 一.什么是CSS 1.1.发展史 1.2.快速入门(三种引用方式) 扩展:外部样式两种写法二.选择器 2.1.基本选择器(标签.类.id) 2.2.元素 ...
CSS SANS – 神奇！使用 CSS3 创建的字体
在我们的认识中,CSS 所能做的就是改变网页的排版布局,调整字间距等.然而,这里我们要介绍的则是使用 CSS3 制作字体.CSS SANS 可以通过 CSS 技术创建的A-Z字体,一起来围观下. 在线 ...
Js+Css打造的红色经典伸缩菜单代码
代码简介: JS+Css伸缩菜单,红色,很好看.注:IE6下好像有点不正常,用的朋友自己修正下! 代码内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...
[css] 用CSS绘制一个红色的爱心
[css] 用CSS绘制一个红色的爱心 // 用过就给贴过来了.heart {position: relative;width: 100px;height: 90px;}.heart:before, ...
HTML+CSS教程（十）css3(3D属性详解及动画)
一.3D 转换 1.左手坐标系 :伸出左手,让拇指和食指成"L"形,大拇指向右,食指向上,中指指向前方.这样我们就建立了一个左手坐标系,拇指,食指和中指分别代表X.Y.Z 轴的正方 ...
css锯齿边框圆点,CSS实现OSX风格的三个圆点
效果展示先看图,左上角OSX风格的圆点我的实现方法按照我之前的习惯,我会在div中放入一个span用作钩子,如下HTML结构: 正文内容然后写入如下CSS:.box{ position: re ...
css中去掉列表ul中的圆点
去掉圆点只需要一句代码就好: ul {list-style-type: none; } list-style-type属性是设置列表前面标志的类型,详细信息可以查看这个链接 http://www.ru ...
居中小圆点html,css：li中的list-style小圆点和文字没有居中对齐的解决办法
li的list-style小圆点和文字没有居中对齐? 我们开始 .ul li{ list-style:disc inside;} 感觉小圆点和文字没有居中对齐(小圆点在偏下一点),有什么方法使他们居中 ...

css html实现红色圆点,css3实现圆点

css html实现红色圆点,css3实现圆点相关推荐

最新文章

热门文章