引导者本文目录一览：
- 1、怎么把DIV做成椭圆形
- 2、css如何设置文本框的为半椭圆
- 3、怎样用css写出圆形边框
- 4、CSS画三角形、圆形、椭圆形总结
- 5、css3中怎样定义动画的旋转中心点
- 6、css画出各种不规则图形
怎么把DIV做成椭圆形
1、【第一步】打开Dreamweaver cc 2014软件，选择建立html界面，里面自动生成一些必要代码的代码格式，不需再浪费时间去写。【第二步】在body标签内输入：div class=Odiv/div，这里的div就是用于画圆形的标签。
2、应该这样吧：你可以参考改下背景图片，实现椭圆边框。
3、首先，建立一个div，给div设置圆角边框的弧度。
4、第一步，打开电脑进入桌面，打开软件进界面。第二步，打开软件进入后，打开相应的文档。第三步，找到右边菜单栏的阵列命令点击使用。第四步，选择阵列的类型，选择对象，输入阵列的数量，完成后点击确定。
5、哎 LZ真是不提问则以，一提问就提问了个这么有创造力的问题。刚才没事情就给LZ写了写，LZ看看还有什么问题。至于定义高度宽度，很简单，一楼回答过了。
6、在工具箱中单击“椭圆形工具”。在页面中按下鼠标左键并拖动光标，在不释放鼠标的情况下，随意移动鼠标可调整椭圆形，松开鼠标后完成的就是椭圆形的绘制。
css如何设置文本框的为半椭圆
新建一个html文件。写入代码 ！DOCTYPE html css制作椭圆 在html文件里找到标签，在标签里创建一个标签，然后为这个标签添加class=ellipse。如图：为ellipse类设置样式。
方法如下：如果要兼容ie6等浏览器，只能用背景图片做，就是做一个圆角的图片，再把input放在上面。把border：10px solid red； 改成border：1px solid red；就能看到效果了。用背景图片或者javascript实现。
html文本框圆角边框css样式可以通过改变border-radius属性的值进行添加。border-radius值的单位可以使用“px”，也可以使用“%”，单位不同效果也不同。
首先打开sublime text编辑器，新建一个html文件，里面写入一个p标签：然后设置p标签的样式，这里先设置一个边框，然后设置圆角边框，主要使用CSS3属性border-radius属性定义圆角效果。
怎样用css写出圆形边框
首先根据实现图片的大小制作一个圆角边框。打开PS，新建一空白文档，文档的大小根据需要情况来定，在此小编将其设置为400*400，设置完成后点击”好“按钮。
实心上半圆：方法：把高度(height)设为宽度(width)的一半，并且只设置左上角和右上角的半径与元素的高度一致(大于也是可以的)。
首先打开sublime text编辑器，新建一个html文件，里面写入一个p标签：然后设置p标签的样式，这里先设置一个边框，然后设置圆角边框，主要使用CSS3属性border-radius属性定义圆角效果。
html文本框圆角边框css样式可以通过改变border-radius属性的值进行添加。border-radius值的单位可以使用“px”，也可以使用“%”，单位不同效果也不同。
CSS画三角形、圆形、椭圆形总结
1、最终的简单三角形就绘制出来了。同理，如果想要得到其它边上的三角形，只需要将剩余的border边颜色设置为白色或透明色即可。
2、底边固定时，只要调整顶点的位置，就可以控制形状。 顶点水平位置：由 border-left 和 border-right 决定，顶点向左调整时，需增加 border-right ，减少 border-left ；顶点向右调整时，反之。
3、稍微修改一下，看看给每一个div； 都给他们加上边框 ，注意我这里的边框的顺序，上、右、下、左。相信你应该懂得 为什么这样写。继续看 看看，去掉 div 的高度和宽度，看看效果。。 看到这里是不是有点感觉了。
4、作为画圆是一项前端css的基本功了，画圆的思路是设置长和宽相等，那么呈现出来的是一个正方形，其次再让正方形的边框弧度为百分之五十，就可以变为圆形了，或者如果写成和设置的长和宽一半的长度的话，也是可以的。
5、我们的思路是使用border边框来实现三角形的样式，因为border的边框是由四个三角形组成的。
css3中怎样定义动画的旋转中心点
1、我们没有使用transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、移位、缩放等操作都是以元素自己中心（变形原点）位置进行变形的。
2、首先新建一个html5文档，完成基本代码编写，如下图所示。然后新建一个长100像素，高50像素背景为红色的长方形图层。接着通过输入“border-radius：50%/50%”属性，如下图所示，将长方形图层设置成一个椭圆形。
3、使用transform-origin设置css3旋转中心，分别有两个参数，代表x和y轴的位置。旋转参考的零点：元素左上角的位置或者说盒子模型的左上角。
4、transform-origin：50% 50%； 设置旋转中心为元素中心。transform-origin：0% 0%； 设置旋转中心为元素左上角。transform-origin：100% 100%； 设置旋转中心为元素右下角。
5、使用CSS3 transform 属性设置元素旋转。定义和用法 transform 属性向元素应用 2D 或 3D 转换。
css画出各种不规则图形
1、其实 hack 出三角形只需要两个条件，第一，元素本身的长宽为0；其次，将不需要的部分通过 border-color 来设置隐藏。通过类似的方法，你还可以创造出梯形，上图中的三个图形的代码如下。
2、grid-td 想放图片的话直接将 img标签放到 grid-td的div里面去。思路很简单，看似不规则的排列实际是规则的，与其一个一个将div旋转，不如放入一个容器里面排列好，然后旋转了-45° 。
3、前端开发常用的进度条效果如下：（环形进度条下次再讲！） 这两个算是比较有代表性的，一个的均匀的一个的不均匀的，实现起来略有不用。
