圆角属性的应用----精品套装 作业的完整代码

最新推荐文章于 2023-08-30 18:17:08 发布
最新推荐文章于 2023-08-30 18:17:08 发布
阅读量182 收藏
点赞数 1
分类专栏： 作业代码 文章标签： 圆角属性的应用 hover滑入
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liliming86575513/article/details/89440060
版权

在下面这张图的前提下,当鼠标滑入后产生出第二张图片的效果. 

这个作业的完整代码如下: 

<!Doctype html>
<lang="en">
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="keywords" content="">
        <meta name="description" content="">
        <title>81-北极星-圆角应用</title>
        <style>
            body{
                background-color:#ccc;
            }
            .wrap{
                width: 200px;
                height: 200px;
                background-color: #fff;
                margin: 100px auto;
                border-radius: 50%;
                background: url("images/demo1/7.jpg") no-repeat 0/cover;
                /*这里很重要: 不要写成background-image*/
            }
            .wrap a{
                display:none;  /*这里很重要.让已经准备好的a 标签显示消失*/
                width: 200px;
                height: 125px;
                background-color: rgb(0 ,0, 0, .6) ;
                /*-这里很重要: rgb() 里面的四个数值需要用逗号隔开*/
                /*另外,这里是background-color*/
                border-radius: 50%;
                /*另一种方法: 在上面加一个 over-flow: hidden 溢出隐藏也可以实现消除边角变成圆形*/
                padding-top: 75px;
                text-align: center;
                font-size: 18px;
                line-height: 15px;
                color: #fff;
                /*字体的颜色直接用  color  而不是, font-color 或者其他*/
                text-decoration: none;
            }
            .wrap:hover a {
                display: block;  /*这里很重要.让消失了的a 标签显示出来*/
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <a href=""> 
                <p>精品套装</p>
                <p>欢迎试用</p>
            </a>
        </div>
    </body>
</html>

前端初学者,欢迎指正!

liliming86575513
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
div圆角代码 非常简单的圆角代码
06-30
div圆角代码，div圆角代码，div圆角代码，div圆角代码，div圆角代码，div圆角代码
css圆角代码——附注释
wwppp987的博客
09-03 1236
border-radius:3px 4px 5px 6px; 代表设置对象左上角3px圆角、右上角4px圆角、右下角5px圆角、左下角6px圆角。
css-设置圆角
SqlloveSyn的博客
01-01 807
给单独一角设置圆角：border-xxx-xxx-radius。例如：左上角 border-top-left-radius。四个值：左上 右上 右下 左下。三个值：左上 右上左下 右下。两个值：左上右下 右上左下。也可以用来设置一个圆。
Android设置圆角看着一篇文章就够了
热门推荐
dream.zhou
10-31 1万+
方法1：Outline 方法2：CardView 方法3：自定义Drawable .....你还知道哪些优雅的方式来设置圆角，可以分享出来共同学习
生成平滑圆角
淡定的人的博客
03-19 648
【代码】生成平滑圆角。
php 圆角边框代码,css怎么实现圆角边框和圆形效果？（图文+视频教程）
weixin_34274954的博客
03-21 1700
css圆角边框的效果通常会用在前端网页设计中的导航栏或者提示框等部分。通过css设置圆角边框或者圆角图片的效果实现，能使整体网页页面显得更加丰富。本篇文章就给大家介绍如何使用css设置圆角边框的效果。下面我们通过具体的代码示例给大家进行相关知识详解。css圆角边框代码示例如下：示例1：css单边圆角边框效果css圆角边框代码示例div{width: 200px;height: 200px;back...
CSS实现圆角的三种方法以下直接给出代码：
学无止境的专栏
05-19 1303
CSS实现圆角的三种方法以下直接给出代码：第一种：#a{border-left:1px #333 solid;border-right:1px #333 solid;width:300px;height:500px;}.b{height:1px;overflow:hidden;border-left:1px #333 solid;border-right:1px #333 solid;}第二种：c
View实现圆角的几种方式
最新发布
qq_36390114的博客
08-30 2478
android圆角实现
html中的变圆的属性,CSS3属性之圆角效果——border-radius属性
weixin_35907598的博客
06-04 4877
在css3之前，要实现圆角的效果可以通过图片或者用margin属性实现(可以参考这里：http://www.hicss.net/css-practise-of-image-round-box/)。实现过程很繁琐，但CSS3的到来简化了实现圆角的方式。CSS3实现圆角需要使用border-radius属性，但因为浏览器兼容性的问题，在开发过程中要加私有前缀。1234-webkit-border-ra...
CSS的圆角属性（border-radius）
qq_45799465的博客
01-25 6061
圆角属性在前端的应用范围较广，在高级感的塑形上必不可少。下面就跟我一起了解圆角属性的具体语法、应用、及注意事项。 切正圆 正圆 border-radius:20px; 一个值代表4个半径都是20px的正圆 border-radius:20px 40px; 两个值代表左上右下是20px，右上左下是40px的正圆 border-radius:20px 40px 60px; 三个值代表左上20px，右上和左下是40px，右下是60px的正圆 border-radiu...
Swift-技巧（五）设置圆角的代码
我为双鱼狂
11-16 1880
摘要 实现控件圆角的代码时，会不假思索的写 cornerRadius 和 masksToBounds，因为搜索得到的设置圆角的代码就是这样。今天突发奇想，为什么要写 masksToBounds？ 打个比方，设置一个按钮的圆角是 5，我会立马写这两行代码： btn.layer.cornerRadius = 5 btn.layer.masksToBounds = true 呈现的效果上，是没有任何问题的。但是为什么要设置 masksToBounds 为 true 呢？能不写吗？ 带着问题，来看一下 ma.
圆角表格代码
11-27
<TABLE fixed" height=28 cellSpacing=0 cellPadding=0 width="100%" border=0> <TBODY> <TR height=3 width="100%"> <TD> <TABLE fixed" height=3 cellSpacing=0 cellPadding=0 width="100%" border=0> <TBODY> <TR height=1> <TD width=1></TD> <TD width=1></TD> <TD width=1></TD> <TD bgColor=#908a47></TD> <TD width=1></TD> <TD width=1></TD> <TD width=1></TD> </TR> <TR height=1> <TD></TD> <TD bgColor=#908a47 colSpan=2></TD> <TD bgColor=#f7f8f9></TD> <TD bgColor=#908a47 colSpan=2></TD> <TD></TD> </TR> <TR height=1> <TD></TD> <TD bgColor=#908a47></TD> <TD bgColor=#f7f8f9 colSpan=3></TD> <TD bgColor=#908a47></TD> <TD></TD> </TR> </TBODY> </TABLE></TD> </TR> <TR> <TD> <TABLE fixed" height="100%" cellSpacing=0 cellPadding=0 border=0> <TBODY> <TR> <TD width=1 bgColor=#908a47></TD> <TD id=oINNER bgColor=#f7f8f9>  </TD> <TD width=1 bgColor=#908a47></TD> </TR> </TBODY> </TABLE></TD> </TR> <TR height=3 width="100%"> <TD> <TABLE fixed" height=3 cellSpacing=0 cellPadding=0 width="100%" border=0> <TBODY> <TR height=1> <TD width=1></TD> <TD width=1 bgColor=#908a47></TD> <TD width=1 bgColor=#f7f8f9></TD> <TD bgColor=#f7f8f9></TD> <TD width=1 bgColor=#f7f8f9></TD> <TD width=1 bgColor=#908a47></TD> <TD width=1></TD> </TR> <TR height=1> <TD></TD> <TD bgColor=#908a47 colSpan=2></TD> <TD bgColor=#f7f8f9></TD> <TD bgColor=#908a47 colSpan=2></TD> <TD></TD> </TR> <TR height=1> <TD colSpan=3></TD> <TD bgColor=#908a47></TD> <TD colSpan=3></TD> </TR> </TBODY> </TABLE></TD> </TR> </TBODY> </TABLE>
html 中圆角怎么写,css圆角边框代码怎么写？（代码示例）
weixin_31095703的博客
06-02 4006
本篇文章主要给大家介绍css边框效果怎么实现的。css圆角边框代码具体示例如下：css圆角边框代码实例div{color: white;text-align:center;border:2px solid #a1a1a1;padding:10px 40px;background: #029789;width:350px;border-radius:25px;-moz-border-radius:2...
圆角代码
woaiyingyu321的专栏
04-14 384
-----------圆角代码------- [code="java"]*{margin:0;padding:0;font-size:12px;} /*通用样式--容器宽度值*/ .sharp{width:200px;margin:20px auto 0;} /*没有height*/ /*上圆角框通用设置样式，如果要运用多个不同颜色，以下6句不用重新变化(外框无高，里框...
Shape属性之圆角（实现代码及思路）
Natty的博客
10-12 501
&lt;shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"&gt; &lt;!--设置背景色--&gt; &lt;solid android:color="#FF0000" /&gt; &lt;!--设置圆角--&gt;
让div变为圆角
淡蓝海的博客
09-03 1947
border-radius:5px;width:200px;height:100px;"> 圆角
圆角效果实现，圆角效果对性能的影响及优化
黑夜
03-24 1608
圆角（RounderCorner）是一种很常见的视图效果，相比于直角，它更加柔和优美，易于接受。当然，设置圆角会带来一定的性能损耗，如何提高性能是另一个需要重点讨论的话题。 一、如何设置圆角 通常label.layer.cornerRadius=x就可以设置圆角，但是cornerRadius只会影响视图的背景颜色和border，对于内部还有子视图的控件就会设置不成功(如UILabel)，对
解读图片圆角代码
Peking之成长路程
04-24 816
引言 以前需要做一个图片圆角的功能，在网上搜索代码，然后直接用到项目中。今天又看到这段代码，感觉很陌生。而作为一名不合格的程序员，这种事情是不能不刨根问底的。所以就分析，以便和其他人的理解做对比。 代码 代码如下(stack overflow)： public static Bitmap toRoundCornerImage(Bitmap bitmap, int pixels...
"Photoshop-CC常用快捷键及工具总结
横排文字、直排文字、横排文字蒙板和直排文字蒙板使用【T】键，路径选择和直接选择工具使用【A】键，矩形、圆角矩形、椭圆、多边形、直线和自定义形状工具使用【U】键。抓手工具使用【H】键，旋转视图工具使用【R】...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值