border-radius编程练习1-3

我们刚学了圆角的知识，那么我们运用圆角的知识来实现下图所要求的效果：

参考代码：

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <title>border-radius案例</title>

  <meta name='description' content='border-radius案例'>

  <meta name='keywords' content='border-radius案例'>

  <style>

    /* 此处写代码 */

    div {

      width: 400px;

      height: 300px;

      border: 1px solid red;

      -webkit-border-radius: 20px 10px 60px 10px;

      -moz-border-radius: 20px 10px 60px 10px;

      -o-border-radius: 20px 10px 60px 10px;

      border-radius: 20px 10px 60px 10px;

      margin: 0 auto;

    }

  </style>

  <script>

  </script>

</head>

<body>

  <!-- 此处写代码 -->

  <div></div>

</body>

</html>

border-radius编程练习1-3的更多相关文章

  1. 重温CSS：Border属性

    边界是众所周知的,有什么新的东西吗?好吧,我敢打赌,在这篇文章中,有很多你不看永远不知道的东西! 不仅可以用CSS3来创建圆角,使用原有CSS一样可以显示自定义图形.这是正确的(有待考究):在过去,没 ...

  2. 为什么要使用sass

    或许你已经听过一个叫作Sass的东东?可能你已经了解它,并且你能像大师一样写出一些函数? 对于不清楚我在讲什么的读者或者客户,你们可以想想web开发过程,你们的期望和站点用户的体验想要怎样的.无论如何 ...

  3. 前端笔记之Vue（三）生命周期&CSS预处理&全局组件&自定义指令

    一.Vue的生命周期 生命周期就是指一个对象的生老病死的过程. 用Vue框架,熟悉它的生命周期可以让开发更好的进行. 所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和 ...

  4. 如何高效的阅读uni-app框架？（建议收藏）

    作者 | Jeskson来源 | 达达前端小酒馆 uni-app的框架,配置:page.json,manifest.json,package.json,vue.config.js.脚本,应用程序,ma ...

  5. 前端Tips#3 - 简写的 border-radius 100% 和 50% 是等效的

    本文同步自 JSCON简时空 - 技术博客,点击阅读 视频讲解 视频地址 文字讲解 1.先讲结论 border-radius 这个 css 属性大家应该使用得非常娴熟,现实中用到的场景基本都是四个圆角 ...

  6. jquery/zepto 圣诞节雪花飞扬

    下载地址: http://www.html5tricks.com/jquery-html5-christ-snow.html 演示地址: http://www.html5tricks.com/jque ...

  7. 为 Web 设计师准备的 20 款 CSS3 工具

    1.CSS3 Generator 2. Border Radius 3. CSS3 Maker 4. CSS3 Transforms 5. CSS3 Drop shadow generator 6. ...

  8. jQuery实践——属性和css篇

    属性: attr html:<div>demo1</div> jQuery:$("div").attr("id","demo1 ...

  9. Designing for iOS: Graphics & Performance

    http://robots.thoughtbot.com/designing-for-ios-graphics-performance  [原文] In the previous article, w ...

  10. Quartz2D复习（一）--- 基础知识 / 绘制线段圆弧 / 图片水印 / 截图

    1.Quartz 2D是一个二维绘图引擎,同时支持ios和Mac系统: Quart2D的API是纯C语言的,API来自于Core  Graphics框架: 2.Quartz 2D可以绘制图形(线段/三 ...

随机推荐

  1. Prometheus 系列开篇：为什么要学 Prometheus ？

    「Prometheus 系列开篇:为什么要学 Prometheus ?」首发于[陈树义]公众号,点击跳转到原文https://mp.weixin.qq.com/s/HCS6X3l6nVBw_hAnd6 ...

  2. SpringBoot+Activiti+bpmn.js+Vue.js+Elementui(OA系统审批流)

    引言:OA系统用到请假.加班.调休.离职,需要使用工作流进行流程审批 一:activiti流程设计器的选择(通过学习activiti工作流过程中,发现一款好的流程设计器将会更好的方便的设计好流程(主要 ...

  3. go 加锁

    package mainimport ( "fmt" "math/rand" "sync" "time")var tic ...

  4. spring boot:redis+lua实现顺序自增的唯一id发号器(spring boot 2.3.1)

    一,为什么需要生成唯一id(发号器)? 1,在分布式和微服务系统中, 生成唯一id相对困难, 常用的方式: uuid不具备可读性,作为主键存储时性能也不够好, mysql的主键,在分库时使用不够方便, ...

  5. SQL SERVER调优常用方法 sql优化

    说起SQL SERVER的调优,我想大伙也很想知道这方面的知识.本人也正在探索的路上,大家有什么好的意见,欢迎一起探讨.研究.博取众人之长,才能扬长避短.本文中的内容主要是摘自<程序员的SQL金 ...

  6. 【Azure云服务 Cloud Service】Cloud Service的实例(VM)中的服务描述Software Protection 与 Windows Defender， 如何设置Windows Defender Antivirus服务

    1)Software Protection 与 Windows Defender是两个独立的服务.在Windows 服务中他们的描述分别为 Software Protection Enables th ...

  7. C# 将Excel里面的数据填充到DataSet中

    /// <summary> /// 将Excel表里的数据填充到DataSet中 /// </summary> /// <param name="filenam ...

  8. Linux命令的内部命令执行

    一个命令可能既是内部命令也是外部命令 因为内部命令优先级高,先执行内部命令 [04:21:44 root@C8[ ~]#type -a echo echo is a shell builtin ech ...

  9. CVE-2019-15107漏洞复现

    特别说明 漏洞复现参考了teeom sec的panda潘森的文章,是根据他的思路进行复现. 搭建dockers环境, 然后安装vulhub(此处省略,自行百度) 进入vulhub/webmin/CVE ...

  10. Serializable使用

    android的另一个序列化Serializable比较简单,实现它的接口,然后生成所有成员变量的方法,再生成所有成员变量的getset方法,serializable可以存储对象,所以下面代码传递了一 ...