css画出各种不规则图形

html-css021

css画出各种不规则图形,第1张

1、圆形

#circle{width:100pxheight:100pxbackground:red-moz-border-radius:50px-webkit-border-radius:50pxborder-radius:50px}

2、椭圆

#oval{width:200pxheight:100pxbackground:red-moz-border-radius:100px / 50px-webkit-border-radius:100px / 50pxborder-radius:100px / 50px}

3、等边三角

#triangle-up{width:0height:0border-left:50px solid transparentborder-right:50px solid transparentborder-bottom:100px solid red}

4、五角星

#star-five{margin:50px 0position:relativedisplay:blockcolor:redwidth:0pxheight:0pxborder-right:100px solid transparentborder-bottom:70px solid redborder-left:100px solid transparent-moz-transform:rotate(35deg)-webkit-transform:rotate(35deg)-ms-transform:rotate(35deg)-o-transform:rotate(35deg)}#star-five:before{border-bottom:80px solid redborder-left:30px solid transparentborder-right:30px solid transparentposition:absoluteheight:0width:0top:-45pxleft:-65pxdisplay:blockcontent:''-webkit-transform:rotate(-35deg)-moz-transform:rotate(-35deg)-ms-transform:rotate(-35deg)-o-transform:rotate(-35deg) }#star-five:after{position:absolutedisplay:blockcolor:redtop:3pxleft:-105pxwidth:0pxheight:0pxborder-right:100px solid transparentborder-bottom:70px solid redborder-left:100px solid transparent-webkit-transform:rotate(-70deg)-moz-transform:rotate(-70deg)-ms-transform:rotate(-70deg)-o-transform:rotate(-70deg)content:''}

5、爱心

#heart{position:relativewidth:100pxheight:90px}#heart:before,#heart:after{position:absolutecontent:""left:50pxtop:0width:50pxheight:80pxbackground:red-moz-border-radius:50px 50px 0 0border-radius:50px 50px 0 0-webkit-transform:rotate(-45deg)-moz-transform:rotate(-45deg)-ms-transform:rotate(-45deg)-o-transform:rotate(-45deg)transform:rotate(-45deg)-webkit-transform-origin:0 100%-moz-transform-origin:0 100%-ms-transform-origin:0 100%-o-transform-origin:0 100%transform-origin:0 100%}#heart:after{left:0-webkit-transform:rotate(45deg)-moz-transform:rotate(45deg)-ms-transform:rotate(45deg)-o-transform:rotate(45deg)transform:rotate(45deg)-webkit-transform-origin:100% 100%-moz-transform-origin:100% 100%-ms-transform-origin:100% 100%-o-transform-origin:100% 100%transform-origin:100% 100%}

6、倒三角

#triangle03{width:0height:0border:50pxsolid transparentborder-top:50pxsolid blue }

bootstrap如何实现横向布局

Bootstrap学习笔记(二) 表单

源码分析:

单中常见的元素主要包括:文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。

Bootstrap框架默认的表单是垂直显示风格,在Bootstrap框架中要实现水平表单效果,必须满足以下两个条件:

效果:

在Bootstrap框架中实现内联表单,只需要在<form>元素中添加类名“form-inline”即可。

CSS之使用display:inline-block来布局

在input前面添加一个label标签时,会导致input换行显示。如果你必须添加这样的一个label标签,并且不想让input换行,你需要将label标签也放在容器“form-group”中。

bootstrap栅栏系统css中的col-xs- 、col-sm- 、col-md-* 的意义以及 bootstrap一个标签中,同时有 col-xs , col-sm , col-md , col-lg的理解

可以响应式的设置大小。

Bootstrap标签(label)的使用

bootstrap图标库

CSS代码如下

border-bottom: 2px solid red

代码解释:

border-bottom: 表示下边框

2px:表示边框宽度

solid:实现边框

red:红色