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. 踩坑 Pycharm 2020.1.1 安装/ JetBrains破解/ anacode配置

    引言 网上的办法试了很多,通常不能解决问题,还会引发一些负效应,选取了一个试了两天终于成功的方案记录一下备用. Pycharm安装 https://www.jetbrains.com/pycharm/ ...

  2. 安装mariadb/mysql 连接失败问题

    在linux下安装mariadb会出现一系列问题 问题1->服务器端不需要用户名密码就可登陆数据库 问题2->php使用mysql不能连接数据库 访问受限 问题3->navicate ...

  3. 怎么快速从产品助理/初级 PM 成长为高级 PM？

    一般想成为一枚产品经理的同学,如果没有经过系统的学习,都是从产品专员/助理开始做起的~ 那要想快速从产品助理/初级 PM 成长为高级 PM,以下这几点必不可少 直接上干货~ 全文篇幅较长,可以点赞收藏 ...

  4. 1.Linux内核模块编程

    1.模块加载程序结构 - 模块加载函数: static int _init init_function(void); module_init(init_function); - 模块卸载函数: sta ...

  5. linux(centos8):为prometheus安装grafana(grafana-7.0.3)

    一,grafana的用途 1,grafana是什么? grafana 是用 go 语言编写的开源应用, 它的主要用途是大规模指标数据的可视化展现 它是现在网络架构/应用分析中最流行的时序数据展示工具 ...

  6. ansible用get_url模块在受控机下载文件(ansible2.9.5)

    一,ansible的get_url模块用途: get_url模块可以在受控机下载文件 可以理解成从受控端执行wget 下载的url支持:http | https | ftp   三种协议 说明:刘宏缔 ...

  7. JS的Document属性和方法(转)

    document.title //设置文档标题等价于HTML的title标签document.bgColor //设置页面背景色document.fgColor //设置前景色(文本颜色)docume ...

  8. poj1655 Balancing Act (dp? dfs?)

    Balancing Act Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 14247   Accepted: 6026 De ...

  9. ServletRequest使用介绍

    ServletRequest: 定义将客户端请求信息提供给某个 servlet 的对象:servlet 容器创建 ServletRequest 对象,并将该对象作为参数传递给该servlet的serv ...

  10. CNN作为denoiser的优势总结

    图像恢复的MAP推理公式: $\hat{x}\text{}=\text{}$arg min$_{x}\frac{1}{2}||\textbf{y}\text{}-\text{}\textbf{H}x| ...