书小宅之网页设计CSS3—

CSS3绘制三角形和梯形

div的边框属性
border-style 属性用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
只有当这个值不是 none 时边框才可能出现。

1、border-style:dotted solid double dashed;
上边框是点状
右边框是实线
下边框是双线
左边框是虚线
2、border-style:dotted solid double;

上边框是点状

右边框和左边框是实线

下边框是双线

3、border-style:dotted solid;

上边框和下边框是点状

右边框和左边框是实线

4、border-style:dotted;

所有 4 个边框都是点状

值	描述
none	定义无边框
hidden	于“none”相同，不过应用于表时除外，对于表，hidden用于解决边框冲突
dotted	定义点状边框。在大多数浏览器中呈现为实线段。
dashed	定义虚线，在大多数浏览器中呈现为实线。
solid	定义实线。
double	定义双线，双线的宽度等于border-width的值。
groove	定义3D凹槽边框，其效果取决于border-color的值。
ridge	定义3D垄状边框。其效果取决于border-color的值。
inset	定义3D inset边框。其效果取决于border-color的值。
outset	定义3D outset边框。其效果取决于border-color的值。
inherit	规定应该从父元素继承边框样式。
被包含的元素决定定位，则其父容器必须是相对定位或绝对定位。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>画线</title>
<style>section div{display:inline-block}.shap-1{width: 100px;height: 100px;border: 30px groove #fac}.shap-2{width: 100px;height: 100px;border: 30px solid #600; border-color:#f00 transparent transparent transparent}.shap-3{width: 0px;height: 0px;border: 30px solid #600; border-color:transparent transparent #0f0 transparent}/*改变transparent的位置可以改变提醒的方向*/
</style>
</head><body>
<section><div class="shap-1">立体框</div><div class="shap-2">梯形</div><div class="shap-3">三角形</div>
</section>
<script>
</script>
</body>
</html>

CSS3绘制多边形

content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。

说明：该属性用于定义元素之前或之后放置的生成内容。默认地，这往往是行内内容，不过该内容创建的框类型可以用属性 display 控制。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>画线</title>
<style>section div{display:inline-block}/*上三角形，底边长由左边框和右边框的宽度决定，高度由自己决定，如果左或右透明，则便成直角，没有左右，则无三角*/
/*width:0; height:0除三角形外的边框的延长宽和高*/.shap-1{position:relative;width:0px;height:0; border-bottom:100px solid #0f0;border-left:100px solid transparent; border-right:100px solid transparent;}/*三角形的高度由border-bottom，宽度由左右两侧的宽度决定*/.shap-1:after{content:""; border-top:100px solid #0f0; border-left:100px solid transparent; border-right:100px solid transparent;position:absolute;top:0px;}.shap-2{position:relative;width:60px;height:0; border-bottom:100px solid #f00;border-left:100px solid transparent; border-right:100px solid transparent;}/*三角形的高度由border-bottom，宽度由左右两侧的宽度决定*/.shap-2:after{content:""; border-top:150px solid #00f; border-left:130px solid transparent; border-right:130px solid transparent;position:absolute;top:100px;left:-100px;}
</style>
</head><body>
<section><div class="shap-1">平行四边形</div><div class="shap-2">菱形</div>
</section>
</section>
<script>
</script>
</body>
</html>

书小宅之网页设计CSS3——多边形相关推荐

书小宅之网页设计CSS3——圆角矩形
圆角半径四个方向的参数都写时,对应的顺序是左上,右上,右下,左下. border-radius: 1-4 length|% / 1-4 length|%; 注释:按此顺序设置每个 radius 的四个 ...
书小宅之网页设计——用之有道
网页标题title:title定义的标题仅是在浏览器标题栏中显示的信息.title作为属性用来定义提示文本. 网页内容的标题hi:一般一个网页应该只有一个一级标题(主标题),也就是说网页内容应该只用依 ...
书小宅之网页设计——标签
HTML常用标签文档结构标签 <html>--</html> :标识HTML文档的起始和终止. <head>--</head> :标识HTML文档的头 ...
书小宅之网页设计——二次贝塞尔曲线和三次贝塞尔曲线
贝塞尔曲线起始点和终止点在曲线上,方向控制点不再曲线上.二次贝塞尔曲线有一个控制点,三次贝塞尔曲线有两个控制点. 二次贝塞尔曲线定义和用法 quadraticCurveTo() 方法通过使用表示二次 ...
书小宅之概念汇总——胜读十年书
计算机基础世界上第一台电子计算机于1946年诞生于美国. 1945年,ENIAC 的顾问.美籍匈牙利数学家冯·诺依曼在为一台新的计算机EDVAC (EDVAC是电子离散变量计算机的缩写,是世界上 ...
dw网页插入java小程序_DW网页设计100例35：构建Java插入模块
Java 是一种程序设计语言, Java applet ( Java 小程序)是在 Java 的基础上演变而成的.能够嵌入在网页中的.可以执行一定小任务的应用程序. 20060407140110aa1 ...
dw网页插入java小程序_DW网页设计35：构建Java插入模块
Java 是一种程序设计语言, Java applet ( Java 小程序)是在 Java 的基础上演变而成的.能够嵌入在网页中的.可以执行一定小任务的应用程序. 效果说明建立文件,以 Java 计 ...
书小宅之C#——实现的第三方程序嵌入自己的WinForm
首先创建一个C#的窗体应用(.net框架): 在左侧隐藏的工具箱中可以添加控件,对自己的窗体做初步的布局. 这里记录我在做项目的过程中遇到的两个较严重的问题: 问题1:用重叠的Panel实现界面切换, ...
小清新简单网页设计制作模板免费下载
前言此作品包含assets文件夹.images文件夹和index.html文件,PC端和手机端都能够支持浏览,在电脑上下载后,先用rar软件进行解压,解压后直接双击打开index.html文件即 ...

书小宅之网页设计CSS3——多边形

CSS3绘制三角形和梯形

CSS3绘制多边形

书小宅之网页设计CSS3——多边形相关推荐

最新文章

热门文章