- 博客(16)
- 收藏
- 关注
RSS订阅
1原创 JavaScript弹窗
<script type="text/javascript"> function demo(){ alert("警告框") } function demo2(){ var a; var b=confirm("按下按钮") if(b==true){ x="你按下了确认框" }else{ x="你按下了取消框" } document.getElementById("demo2").innerHTML=x } functi.
2021-12-21 14:56:16
513
原创 css3用户界面/ 按钮
resize属性指定一个元素是否应该由用户去调整大小div{ border:2px solid; padding:10px 40px; width:300px; resize:both; overflow:auto;}box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容#example1 { box-sizing: content-box; width: 300px; height: 100px; paddi...
2021-12-03 16:02:26
81
原创 css3 分列
column-count属性指定了需要分割的列数。分成三列.newspaper{ -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ column-count:3;}column-gap属性指定了列与列间的间隙.newspaper{ column-count:3; column-gap:40px;}column-rule-st...
2021-12-03 08:33:15
447
原创 css3 动画
@keyframes 规则是创建动画。@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。当在@keyframes创建动画，把它绑定到一个选择器，否则动画不会有任何效果。指定至少这两个CSS3的动画属性绑定向一个选择器：规定动画的名称 规定动画的时长div{ width:100px; height:100px; background:red; animation:myfirst 5s; -webkit-animation:myfir..
2021-12-02 19:33:16
77
原创 css3 过渡
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。指定要添加效果的CSS属性 指定效果的持续时间。div{ width:100px; height:100px; background:red; transition:width 2s; -webkit-transition:width 2s; /* Safari */}div:hover{ width:300px;}添加多个样式的变换效果，添加的属性由逗号分隔div {
2021-12-02 19:27:46
43
原创 css3 3D
rotateX()方法，围绕其在一个给定度数X轴旋转的元素。div{ width:100px; height:75px; background-color:red; border:1px solid black;}div#div2{ transform:rotateX(120deg); -webkit-transform:rotateX(120deg); /* Safari and Chrome */}rotateY()方法，围绕其在一个给定度数Y轴旋转的元素div.
2021-12-02 19:23:52
84
原创 css3 2D转换
2D变换方法：translate() rotate() scale() skew() matrix()div{ width:200px; height:100px; background-color:yellow; /* Rotate div */ transform:rotate(30deg); -ms-transform:rotate(30deg); /* IE 9 */ -webkit-transform:rotate(30deg); /* Safari and Chr
2021-12-02 19:16:01
67
原创 css3字体
@font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)：@font-face{ font-family: myFirstFont; src: url('Sansation_Light.ttf') ,url('Sansation_Light.eot'); /* IE9 */}div{ .
2021-12-02 19:09:15
86
原创 css3文本效果
text-shadow属性适用于文本阴影指定了水平阴影，垂直阴影，模糊的距离，以及阴影的颜色给标题添加阴影h1{ text-shadow: 5px 5px 5px #FF0000;}也适用于盒子阴影div{ width:300px; height:100px; background-color:yellow; box-shadow: 10px 10px 5px #888888;}::before 和 ::after 两个伪元素中添加阴影效果#boxshadow
2021-12-02 19:07:07
113
原创 css3渐变
线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向 径向渐变（Radial Gradients）- 由它们的中心定义从上到下渐变#grad1 { height: 200px; background-color: red; /* 浏览器不支持时显示 */ background-image: linear-gradient(#e66465, #9198e5);从左到右#grad1 { height: 200px; background
2021-12-02 18:53:19
85
原创 css3背景
background-image属性添加背景图片#example1 { background-image: url(img_flwr.gif), url(paper.gif); background-position: right bottom, left top; background-repeat: no-repeat, repeat; padding: 15px;background-size指定背景图像的大小body{ background..
2021-12-02 18:38:03
100
原创 css3圆角
border-radiusborder-radius - 指定每个圆角四个值:第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。 三个值:第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角 两个值:第一个值为左上角与右下角，第二个值为右上角与左下角 一个值：四个圆角值相同border-top-left-radius 定义了左上角的弧度 border-top-right-radius 定义了右上角的弧度 border-bottom...
2021-12-02 18:30:04
686
原创 css边框
border-radius 圆角边框div{ border:2px solid #a1a1a1; padding:10px 40px; background:#dddddd; width:300px; border-radius:25px;}box-shadow 属性被用来添加阴影:div{ width:300px; height:100px; background-color:yellow; box-shadow: 10px 10px 5px #888888;}.
2021-12-02 18:26:23
94
空空如也
考虑浏览器的兼容性问题
2023-03-21
TA创建的收藏夹 TA关注的收藏夹
TA关注的人