草庐IT

html - 带圆 Angular 的 div 上的高效 CSS3 长阴影

coder 2023-08-04 原文

我目前使用类似于以下的代码在 CSS 中创建长阴影:

box-shadow: 1px 1px #481111,
2px 2px #491111,
3px 3px #491111,
4px 4px #4a1111,
5px 5px #4a1111,
6px 6px #4b1111,
7px 7px #4b1111,
8px 8px #4c1212,
9px 9px #4c1212,
...
200px 200px #b42b2b;

现在的问题是，由于有一个很大的长阴影 (200px)，许多功能较弱的设备(如手机或旧计算机)无法处理这些阴影而不会出现延迟。我正在寻找这种在线制作长阴影方法的替代方法，但找不到其他方法。

应用此阴影的元素看起来类似于:

(div 的边框半径为 5px)

body {
  background-color: #b42b2b
}
.main {
  width: 500px;
  height: 300px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 1px 1px #481111, 2px 2px #491111, 3px 3px #491111, 4px 4px #4a1111, 5px 5px #4a1111, 6px 6px #4b1111, 7px 7px #4b1111, 8px 8px #4c1212, 9px 9px #4c1212, 10px 10px #4d1212, 11px 11px #4d1212, 12px 12px #4e1212, 13px 13px #4f1212, 14px 14px #4f1212, 15px 15px #501212, 16px 16px #501313, 17px 17px #511313, 18px 18px #511313, 19px 19px #521313, 20px 20px #521313, 21px 21px #531313, 22px 22px #531313, 23px 23px #541313, 24px 24px #541414, 25px 25px #551414, 26px 26px #561414, 27px 27px #561414, 28px 28px #571414, 29px 29px #571414, 30px 30px #581414, 31px 31px #581515, 32px 32px #591515, 33px 33px #591515, 34px 34px #5a1515, 35px 35px #5a1515, 36px 36px #5b1515, 37px 37px #5b1515, 38px 38px #5c1515, 39px 39px #5d1616, 40px 40px #5d1616, 41px 41px #5e1616, 42px 42px #5e1616, 43px 43px #5f1616, 44px 44px #5f1616, 45px 45px #601616, 46px 46px #601616, 47px 47px #611717, 48px 48px #611717, 49px 49px #621717, 50px 50px #631717, 51px 51px #631717, 52px 52px #641717, 53px 53px #641717, 54px 54px #651818, 55px 55px #651818, 56px 56px #661818, 57px 57px #661818, 58px 58px #671818, 59px 59px #671818, 60px 60px #681818, 61px 61px #681818, 62px 62px #691919, 63px 63px #6a1919, 64px 64px #6a1919, 65px 65px #6b1919, 66px 66px #6b1919, 67px 67px #6c1919, 68px 68px #6c1919, 69px 69px #6d1919, 70px 70px #6d1a1a, 71px 71px #6e1a1a, 72px 72px #6e1a1a, 73px 73px #6f1a1a, 74px 74px #6f1a1a, 75px 75px #701a1a, 76px 76px #711a1a, 77px 77px #711b1b, 78px 78px #721b1b, 79px 79px #721b1b, 80px 80px #731b1b, 81px 81px #731b1b, 82px 82px #741b1b, 83px 83px #741b1b, 84px 84px #751b1b, 85px 85px #751c1c, 86px 86px #761c1c, 87px 87px #761c1c, 88px 88px #771c1c, 89px 89px #781c1c, 90px 90px #781c1c, 91px 91px #791c1c, 92px 92px #791c1c, 93px 93px #7a1d1d, 94px 94px #7a1d1d, 95px 95px #7b1d1d, 96px 96px #7b1d1d, 97px 97px #7c1d1d, 98px 98px #7c1d1d, 99px 99px #7d1d1d, 100px 100px #7e1e1e, 101px 101px #7e1e1e, 102px 102px #7f1e1e, 103px 103px #7f1e1e, 104px 104px #801e1e, 105px 105px #801e1e, 106px 106px #811e1e, 107px 107px #811e1e, 108px 108px #821f1f, 109px 109px #821f1f, 110px 110px #831f1f, 111px 111px #831f1f, 112px 112px #841f1f, 113px 113px #851f1f, 114px 114px #851f1f, 115px 115px #861f1f, 116px 116px #862020, 117px 117px #872020, 118px 118px #872020, 119px 119px #882020, 120px 120px #882020, 121px 121px #892020, 122px 122px #892020, 123px 123px #8a2020, 124px 124px #8a2121, 125px 125px #8b2121, 126px 126px #8c2121, 127px 127px #8c2121, 128px 128px #8d2121, 129px 129px #8d2121, 130px 130px #8e2121, 131px 131px #8e2222, 132px 132px #8f2222, 133px 133px #8f2222, 134px 134px #902222, 135px 135px #902222, 136px 136px #912222, 137px 137px #912222, 138px 138px #922222, 139px 139px #932323, 140px 140px #932323, 141px 141px #942323, 142px 142px #942323, 143px 143px #952323, 144px 144px #952323, 145px 145px #962323, 146px 146px #962323, 147px 147px #972424, 148px 148px #972424, 149px 149px #982424, 150px 150px #992424, 151px 151px #992424, 152px 152px #9a2424, 153px 153px #9a2424, 154px 154px #9b2525, 155px 155px #9b2525, 156px 156px #9c2525, 157px 157px #9c2525, 158px 158px #9d2525, 159px 159px #9d2525, 160px 160px #9e2525, 161px 161px #9e2525, 162px 162px #9f2626, 163px 163px #a02626, 164px 164px #a02626, 165px 165px #a12626, 166px 166px #a12626, 167px 167px #a22626, 168px 168px #a22626, 169px 169px #a32626, 170px 170px #a32727, 171px 171px #a42727, 172px 172px #a42727, 173px 173px #a52727, 174px 174px #a52727, 175px 175px #a62727, 176px 176px #a72727, 177px 177px #a72828, 178px 178px #a82828, 179px 179px #a82828, 180px 180px #a92828, 181px 181px #a92828, 182px 182px #aa2828, 183px 183px #aa2828, 184px 184px #ab2828, 185px 185px #ab2929, 186px 186px #ac2929, 187px 187px #ac2929, 188px 188px #ad2929, 189px 189px #ae2929, 190px 190px #ae2929, 191px 191px #af2929, 192px 192px #af2929, 193px 193px #b02a2a, 194px 194px #b02a2a, 195px 195px #b12a2a, 196px 196px #b12a2a, 197px 197px #b22a2a, 198px 198px #b22a2a, 199px 199px #b32a2a, 200px 200px #b42b2b
}
<div class="main">


</div>

背景颜色为:#b42b2b

阴影最暗点在附近:rgba(0,0,0,60%)

最佳答案

您可以使用伪元素、线性渐变和变换来做到这一点。

没有圆 Angular :

body { 
  background: #b42b2b;
}

div {
  width: 300px;
  height: 100px;
  background: white;
  position: relative;
}

div:before {
  position: absolute;
  top: 0;
  left: 100%;
  width: 100px;
  height: 100px;
  content: '';
  background: linear-gradient(to right, rgba(0,0,0,0.6), transparent);
  transform: skewY(45deg);
  transform-origin: 0 0;
}

div:after {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100px;
  content: '';
  background: linear-gradient(180deg, rgba(0,0,0,0.6), transparent);
  transform: skewX(45deg);
  transform-origin: 0 0;
}
<div></div>

更新

圆 Angular 需要更多技巧，因为您必须将前/后伪元素放置在正确的位置，以防止圆 Angular 出现孔洞并防止阴影重叠。 LESS/SASS 等预处理器绝对可以简化正确计算所需的数学运算。

带圆 Angular :

body { 
  background: #b42b2b;
}

div {
  width: 300px;
  height: 100px;
  background: white;
  position: relative;
  border-radius: 5px;
}

div:before {
  z-index: -1;
  position: absolute;
  top: 1px;
  left: calc(100% - 2.5px);
  width: 100px;
  height: calc(100% - 3.5px);
  content: '';
  background: linear-gradient(to right, rgba(0,0,0,0.6), transparent);
  transform: skewY(45deg);
  transform-origin: 0 0;
}

div:after {
  z-index: -1;
  position: absolute;
  top: calc(100% - 2.5px);
  left: 1px;
  width: calc(100% - 3.5px);
  height: 100px;
  content: '';
  background: linear-gradient(180deg, rgba(0,0,0,0.6), transparent);
  transform: skewX(45deg);
  transform-origin: 0 0;
}
<div></div>

关于html - 带圆 Angular 的 div 上的高效 CSS3 长阴影，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45198910/

Angularhtmlpxsectioncodecss

有关html - 带圆 Angular 的 div 上的高效 CSS3 长阴影的更多相关文章

  1. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  2. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No

  3. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  4. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

    所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

  5. ruby-on-rails - date_field_tag，如何设置默认日期？ [ rails 上的 ruby ] - 2

    我想设置一个默认日期，例如实际日期，我该如何设置？还有如何在组合框中设置默认值顺便问一下，date_field_tag和date_field之间有什么区别？ 最佳答案 试试这个:将默认日期作为第二个参数传递。youcorrectlysetthedefaultvalueofcomboboxasshowninyourquestion. 关于ruby-on-rails-date_field_tag，如何设置默认日期？[rails上的ruby]，我们在StackOverflow上找到一个类似的问

  6. ruby-on-rails - openshift 上的 rails 控制台 - 2

    我将我的Rails应用程序部署到OpenShift，它运行良好，但我无法在生产服务器上运行“Rails控制台”。它给了我这个错误。我该如何解决这个问题？我尝试更新ruby​​gems，但它也给出了权限被拒绝的错误，我也无法做到。railsc错误:Warning:You'reusingRubygems1.8.24withSpring.UpgradetoatleastRubygems2.1.0andrun`gempristine--all`forbetterstartupperformance./opt/rh/ruby193/root/usr/share/rubygems/rubygems

  7. ruby-on-rails - 相关表上的范围为 "WHERE ... LIKE" - 2

    我正在尝试从Postgresql表(table1)中获取数据，该表由另一个相关表(property)的字段(table2)过滤。在纯SQL中，我会这样编写查询:SELECT*FROMtable1JOINtable2USING(table2_id)WHEREtable2.propertyLIKE'query%'这工作正常:scope:my_scope,->(query){includes(:table2).where("table2.property":query)}但我真正需要的是使用LIKE运算符进行过滤，而不是严格相等。然而，这是行不通的:scope:my_scope,->(que

  8. ruby-on-rails - Nokogiri:使用 XPath 搜索 <div> - 2

    我使用Nokogiri(Rubygem)css搜索寻找某些在我的html里面。看起来Nokogiri的css搜索不喜欢正则表达式。我想切换到Nokogiri的xpath搜索，因为这似乎支持搜索字符串中的正则表达式。如何在xpath搜索中实现下面提到的(伪)css搜索？require'rubygems'require'nokogiri'value=Nokogiri::HTML.parse(ABBlaCD3"HTML_END#my_blockisgivenmy_bl="1"#my_eqcorrespondstothisregexmy_eq="\/[0-9]+\/"#FIXMEThefoll

  9. ruby-on-rails - Ruby url 到 html 链接转换 - 2

    我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

  10. ruby-on-rails - capybara ::ElementNotFound:无法找到 xpath "/html" - 2

    我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'

随机推荐