今日一练习

最新推荐文章于 2024-06-20 17:54:56 发布

weixin_34019929

最新推荐文章于 2024-06-20 17:54:56 发布

阅读量43

点赞数

文章标签： xhtml python

原文链接：https://my.oschina.net/blogsDdc/blog/100607

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>今天一练</title>
<link rel="stylesheet" href="base.css" type="text/css" />
<style type="text/css">
h3{ font-size:36px; color:#ddddd;}
.demo1-radius{
   width:100px;
   height:100px;
   background:pink;
      margin:5px auto;
       border-radius:1px 10px 15px 20px;
       -webkit-border-radius:1px 10px 15px 20px;
       -moz-border-radius:1px 10px 15px 20px;
       -o-border-radius:50px 10px 15px 20px;/*这里是设置全部（top left right bottpm）*/
       /*如果设置每个角不同的度数顺序是按顺时针方向 --左上角右上角左下角右下角 Ok*/
       text-align:center;
      border-left-radius:1px 10px 15px 20px;
       }
.demo2-box-shadow{
   width:100px; height:100px; background:green;
   box-shadow:1px 5px 3px rgba(0, 0, 0, 0.3);
   -webkit-box-shadow:1px 5px 3px rgba(0, 0, 0, 0.3);
   -moz-box-shadow:1px 5px 3px rgba(0, 0, 0, 0.3);
   margin:5px auto;}
   /*box-shadow的四个参数: 1.X坐标的偏移值 2.Y坐标的偏移值 3.模糊值 4.阴影的color shadow*/
.demo3-text-shadow{
   width:100px; height:100px; background:blue;
   margin:5px auto;
   color:#fff;
   font-size:16px;
   font-weight:bold;
   text-shadow:0px 2px 0 #dddddd;
   -webkit-shadow:0px 2px 0 #dddddd;
   -moz-shadow:0px 2px 0 #dddddd;
   /*参数也是4个和box-shadow的值一样，text-shadow而且是可以省去浏览器前缀的
   *好像现在很多都不用加了，改天去看看现在还是先写上吧
   *box-shadow一样，它可以设置多个阴影通过逗号分隔符，可以用来创建文本或是盒子的轮廓；
   */
   }
.demo5-text-shadow{width:1000px; height:200px; background:green; margin:5px auto;
}
.backgrounds{
   background:url(images/floatBtn_01.jpg)0 0 no-repeat, url(floatBtn.png) 100% 0 no-repeat;
   width:500px; margin:0 auto; height:200px;}
   /*,分割开插入了两张背景图像，第一个的定位是(0,0)，第二个的定位是(100%,0)。
      要确定你对不支持的浏览器使用了备用图片，否则，它将跳此属性，使背景图像留空。
   */
</style>
</head>

<body>
<h3>1.radius(圆角)</h3>
<div class="demo1-radius">
   1.radius
</div>
<h3>2.box-shadow(box阴影)</h3>
<div class="demo2-box-shadow">
   2.box-shadow
</div>
<h3>3.text-shadow(文字阴影)</h3>
<div class="demo3-text-shadow">
   3.text-shadow
</div>
<h3>4.Text-Stroke()</h3>
<div class="demo3-text-shadow">
   4.Text-Stroke
</div>
<h3>5.backgrounds (支持多背景)</h3>
<div class="demo5-text-shadow">
   5.background:
    <div class="backgrounds"></div>
</div>

</body>
</html>

转载于:https://my.oschina.net/blogsDdc/blog/100607