ഒരു വെബ്‌സൈറ്റ് രൂപകൽപ്പന ചെയ്യുന്ന പ്രക്രിയയിൽ, തലക്കെട്ടുകളുടെ ഫോണ്ട്, വലുപ്പം, നിറം എന്നിവ എങ്ങനെ മാറ്റാമെന്ന് പല പുതിയ വെബ്‌സൈറ്റ് നിർമ്മാതാക്കളും ആശ്ചര്യപ്പെടുന്നു. അതെ അത് ശരിക്കും മികച്ച ഓപ്ഷൻ, ഇത് ഉപയോഗിച്ച് നിങ്ങൾക്ക് സൈറ്റിന്റെ രൂപകൽപ്പനയിൽ കുറച്ച് പുതുമ ചേർക്കാൻ കഴിയും. എന്നാൽ സമാനമായ മറ്റൊരു ചോദ്യമുണ്ട്: ഒരു html ഫ്രെയിം എങ്ങനെ നിർമ്മിക്കാം.

ഒരു html ഫ്രെയിം എന്തിനുവേണ്ടിയാണ്?

യഥാർത്ഥത്തിൽ, പ്രത്യേക പ്രവർത്തനങ്ങളൊന്നുമില്ല ഈ ഘടകംകൊണ്ടുപോകുന്നില്ല. എന്നിട്ടും, ആകർഷകമായി രൂപകൽപ്പന ചെയ്ത ഫ്രെയിമിൽ പൊതിഞ്ഞ വാചകം വായനക്കാർക്കിടയിൽ ഒരു പ്രത്യേക താൽപ്പര്യം ഉണർത്തുന്നു. അതിനാൽ, വാചകത്തിന് ചുറ്റുമുള്ള ഒരു ഫ്രെയിമിനെ ഫ്രെയിം ചെയ്ത വാചകത്തിന്റെ പ്രാധാന്യം ഊന്നിപ്പറയുന്നതിനുള്ള ഒരു മാർഗമായി സുരക്ഷിതമായി വിളിക്കാം.

വാചകത്തിന് ചുറ്റും ഒരു ഫ്രെയിം സൃഷ്ടിക്കുന്നതിന്റെ സവിശേഷതകൾ

തീർച്ചയായും, ഫ്രെയിം ഡിസൈനിലെ വ്യതിയാനങ്ങൾ CSS ഉപയോഗിക്കുന്നുകൂടുതൽ, പക്ഷേ അത് തികച്ചും വ്യത്യസ്തമായ ഒരു കഥയാണ്. കൂടാതെ, ഈ രീതി കൂടുതൽ വിപുലമായ സൈറ്റ് നിർമ്മാതാക്കൾക്ക് അനുയോജ്യമാണ്. നിങ്ങളും ഞാനും എഡിറ്റിംഗിന്റെ സഹായത്തോടെയും കരുതുന്നു html കോഡ്അത് കുറയാതെ മാറും മനോഹരമായ ഫ്രെയിം html.

ആദ്യ ഘട്ടത്തിൽ, എല്ലാവർക്കും ഒരു ഫ്രെയിം നിർമ്മിക്കാൻ കഴിയുമെന്ന് നിങ്ങൾ മനസ്സിലാക്കേണ്ടതുണ്ട് html ഘടകംഅത് ഏത് തരത്തിലുള്ള ടാഗ് ആണെന്നത് പരിഗണിക്കാതെ തന്നെ

,

, , തുടങ്ങിയവ.

അതാകട്ടെ, അന്തർനിർമ്മിത ഫ്രെയിമുകളും തമ്മിൽ വ്യത്യാസമുണ്ട് ബ്ലോക്ക് ഘടകങ്ങൾ.

ബിൽറ്റ്-ഇൻ തരത്തിന്റെ ഫ്രെയിം ടാഗുകൾക്കുള്ളിൽ സ്ഥിതിചെയ്യുന്നു, അല്ലെങ്കിൽ കൂടുതൽ ശരിയായി, അതിന്റെ ഡിസ്പ്ലേയ്ക്ക് ഉത്തരവാദിയായ html കോഡ് ചില ടാഗുകൾക്കിടയിൽ ഘടിപ്പിച്ചിരിക്കുന്നു. തൽഫലമായി, നമുക്ക് വാചകത്തിന് ചുറ്റും ഒരു html ഫ്രെയിം ലഭിക്കുന്നു, അതിനായി ആന്തരിക ഇൻഡന്റുകൾ സജ്ജീകരിക്കുന്നതിന് ഞങ്ങൾ ചില കമാൻഡുകൾ എഴുതേണ്ടതുണ്ട്.

ബ്ലോക്കിന്റെ മുഴുവൻ വീതിയിലും ബ്ലോക്ക് ഫ്രെയിമുകൾ രൂപം കൊള്ളുന്നു, ഇത് വീതി പരിമിതപ്പെടുത്തുന്നതുമായി ബന്ധപ്പെട്ട കമാൻഡുകൾ വ്യക്തമാക്കേണ്ടതിന്റെ ആവശ്യകതയെ പ്രകോപിപ്പിക്കുന്നു.

തീർച്ചയായും, ഒരു html ഫ്രെയിമിൽ വാചകം നിർമ്മിക്കുന്നതിന്, ഞങ്ങൾ അന്തർനിർമ്മിത ശൈലികളിലേക്ക് തിരിയേണ്ടിവരും. ഈ രീതിചില വ്യക്തിഗത ശൈലികൾ, വാചകത്തിലെയും ചിത്രങ്ങളിലെയും ഖണ്ഡികകൾ എന്നിവ ഹൈലൈറ്റ് ചെയ്യുന്നതിന് ഏറ്റവും അനുയോജ്യമാകും. സൈറ്റിന്റെ എല്ലാ പേജുകളിലും പ്രദർശിപ്പിക്കുന്ന ടെംപ്ലേറ്റിന്റെ ഒരു പ്രത്യേക ഭാഗം നിങ്ങൾക്ക് ഹൈലൈറ്റ് ചെയ്യണമെങ്കിൽ, ടെംപ്ലേറ്റിന്റെ style.css ഫയൽ എഡിറ്റുചെയ്യുന്നത് ന്യായമാണ്.

html-ൽ ടെക്‌സ്‌റ്റിന് ചുറ്റും ഒരു ഫ്രെയിം എങ്ങനെ നിർമ്മിക്കാം

ധാരാളം സിദ്ധാന്തങ്ങൾ ഉണ്ടെന്ന് ഞാൻ കരുതുന്നു. പരിശീലിക്കാനുള്ള സമയമാണിത്. ഒരു ഉദാഹരണമായി, ഞാൻ ഒരു തിളങ്ങുന്ന ഇളം പച്ച ഫ്രെയിമിൽ ഉൾപ്പെടുത്തും ചാര പശ്ചാത്തലംഈ ലേഖനത്തിലെ പ്രധാന നിർദ്ദേശങ്ങളിൽ ഒന്ന്.

പ്രധാനപ്പെട്ട പോയിന്റ്!ബിൽറ്റ്-ഇൻ ശൈലികൾ മികച്ച രീതിയിൽ പ്രവർത്തിക്കുകയും ദോഷം വരുത്താതിരിക്കുകയും ചെയ്യുന്നു HTML സാധുതസൈറ്റ്.

ഒരേ ഫ്രെയിം നടപ്പിലാക്കാൻ, നിങ്ങൾ ടാഗ് റഫർ ചെയ്യേണ്ടതുണ്ട്

നിങ്ങളുടെ നിർദ്ദേശം.

ഉള്ളത് മുതൽ ഈ ഉദാഹരണത്തിൽഅന്തർനിർമ്മിത css ശൈലികൾ, അവയിൽ ഓരോന്നിനും നിങ്ങളെ പരിചയപ്പെടുത്തുന്നത് ഒരുപോലെ പ്രധാനമാണെന്ന് ഞാൻ കരുതുന്നു.

1. അതിർത്തി- ഫ്രെയിം പ്രദർശിപ്പിക്കുന്നതിന് ഉത്തരവാദിത്തമുള്ള പ്രോപ്പർട്ടി. ചുമതല ലളിതമാക്കാൻ, ഞാൻ ഓരോ പ്രോപ്പർട്ടിയും പ്രത്യേകം വ്യക്തമാക്കിയിട്ടില്ല - അതിർത്തി വീതി (ഫ്രെയിം ബോർഡറുകളുടെ കനം), ബോർഡർ-വർണം (നിറം html ചട്ടക്കൂട്). പകരം, കോളണിന് ശേഷം എല്ലാ പ്രോപ്പർട്ടികളും എഴുതി html കോഡ് അൽപ്പം ചുരുക്കി.

മാറ്റത്തിന് രൂപംഫ്രെയിം മൂല്യം മാറ്റുക ഖര. ഇനിപ്പറയുന്ന ഫ്രെയിം അതിരുകൾ നിലവിലുണ്ട്:

റിഡ്ജ് - ആശ്വാസം.

ഡോട്ടഡ് - ഡോട്ടഡ്.

ഇരട്ട - ഇരട്ട.

ഡാഷ്ഡ് - ഡോട്ടഡ്.

ഖര - ഖര.

2. പാഡിംഗ്- ഫ്രെയിമും അതിൽ പൊതിഞ്ഞ വസ്തുവും തമ്മിലുള്ള ദൂരത്തിന് ഉത്തരവാദിയായ ഒരു പ്രോപ്പർട്ടി.

നിങ്ങൾക്ക് വേണമെങ്കിൽ, ഓപ്പണിംഗ്, ക്ലോസിംഗ് ടാഗുകൾക്കിടയിൽ ഘടിപ്പിച്ചിരിക്കുന്ന കമാൻഡുകളുടെ എണ്ണത്തിൽ ചേർത്തുകൊണ്ട് നിങ്ങൾക്ക് കുറച്ച് കൂടി ശൈലികൾ ഉപയോഗിച്ച് കളിക്കാം.

സ്വത്ത് മാർജിൻ. ഈ രീതിയിൽ, ഫ്രെയിമിന് പുറത്തുള്ള ഘടകങ്ങൾ നിങ്ങൾക്ക് ഇൻഡന്റ് ചെയ്യാൻ കഴിയും.

മാറ്റാൻ വേണ്ടി പശ്ചാത്തലംകോളണിന് ശേഷം ആവശ്യമുള്ള നിറത്തിന്റെ കോഡ് വ്യക്തമാക്കിക്കൊണ്ട് പശ്ചാത്തല-വർണ്ണ സ്വത്ത് രജിസ്റ്റർ ചെയ്താൽ മതി.

ചുറ്റും ഫ്രെയിം html ചിത്രങ്ങൾഇത് ഒരേ രീതിയിലാണ് ചെയ്യുന്നത്, അതിനാൽ നിങ്ങൾക്ക് അതിൽ പ്രശ്നങ്ങളൊന്നും ഉണ്ടാകരുത്. ഒരു തുടക്കക്കാരന് അറിയേണ്ട ഒരേയൊരു കാര്യം അത് പ്രദർശിപ്പിക്കുന്നതിന്, പ്രോപ്പർട്ടികൾ ഒരൊറ്റ ടാഗിൽ എഴുതണം എന്നതാണ് .

ചുരുക്കത്തിൽ, ഒരു ചിത്രത്തിനോ വാചകത്തിനോ ചുറ്റും ഒരു ഫ്രെയിം നിർമ്മിക്കുന്നതിന്, ലേഖനത്തിന്റെ html കോഡിന്റെ ഡിസ്പ്ലേ തുറന്ന് അതിൽ ചില ടാഗുകൾക്കിടയിൽ പ്രത്യേക പ്രോപ്പർട്ടികൾ എഴുതിയാൽ മതിയെന്ന് നമുക്ക് പറയാം.

നിങ്ങളുടെ ശ്രദ്ധയ്ക്ക് നന്ദി, സ്റ്റിമൈൽറോസ്റ്റയുടെ പേജുകളിൽ ഉടൻ കാണാം.

വാചകത്തിൽ കണ്ടെത്തി വ്യാകരണ പിശക്? ദയവായി ഇത് അഡ്മിനിസ്ട്രേറ്റർക്ക് റിപ്പോർട്ട് ചെയ്യുക: ടെക്സ്റ്റ് തിരഞ്ഞെടുത്ത് ഹോട്ട്കീ കോമ്പിനേഷൻ അമർത്തുക Ctrl+Enter

വ്ലാഡ് മെർഷെവിച്ച്

CSS ഉപയോഗിച്ച്, നിങ്ങൾക്ക് പല തരത്തിൽ ഒരു ഘടകത്തിലേക്ക് ഒരു ബോർഡർ ചേർക്കാൻ കഴിയും. അടിസ്ഥാനപരമായി, തീർച്ചയായും, അത് ഉപയോഗിക്കുന്നു അതിർത്തി സ്വത്ത്, ഏറ്റവും സാർവത്രികമായി, അതുപോലെ തന്നെ രൂപരേഖയും, അതിശയകരമെന്നു പറയട്ടെ, ബോക്സ്-ഷാഡോ , പ്രധാന ദൌത്യം ഒരു നിഴൽ സൃഷ്ടിക്കുക എന്നതാണ്. അടുത്തതായി, ഈ രീതികളും അവയുടെ വ്യത്യാസങ്ങളും ഞങ്ങൾ പരിഗണിക്കും.

പ്രോപ്പർട്ടി രൂപരേഖ

ഫ്രെയിമുകൾ സൃഷ്ടിക്കുന്നതിനുള്ള ഏറ്റവും ലളിതമായ സ്വത്ത്. ഇതിന് ബോർഡറിന്റെ അതേ പാരാമീറ്ററുകൾ ഉണ്ട്, എന്നാൽ ചില വിശദാംശങ്ങളിൽ കാര്യമായ വ്യത്യാസമുണ്ട്:

• മൂലകത്തിന് ചുറ്റും ഔട്ട്ലൈൻ പ്രദർശിപ്പിച്ചിരിക്കുന്നു (അകത്ത് അതിർത്തി);
• ബാഹ്യരേഖ മൂലകത്തിന്റെ അളവുകളെ ബാധിക്കില്ല (അതിർത്തി മൂലകത്തിന്റെ വീതിയിലും ഉയരത്തിലും ചേർത്തിരിക്കുന്നു);
• മുഴുവൻ ഘടകത്തിനും ചുറ്റും മാത്രമേ ഔട്ട്‌ലൈൻ സജ്ജീകരിക്കാൻ കഴിയൂ, എന്നാൽ വ്യക്തിഗത വശങ്ങളിൽ അല്ല (അതിർത്തി ഏതെങ്കിലും വശത്ത് അല്ലെങ്കിൽ എല്ലാം ഒരേസമയം ഉപയോഗിക്കാം);
• ബോർഡർ-റേഡിയസ് പ്രോപ്പർട്ടി (അതിർത്തി ബാധിച്ചിരിക്കുന്നു) വ്യക്തമാക്കിയ ഫില്ലറ്റ് ആരം ഔട്ട്‌ലൈനെ ബാധിക്കില്ല.

ചോദ്യം ഉയർന്നുവരുന്നു - ലിസ്റ്റുചെയ്ത വ്യത്യാസങ്ങൾക്കിടയിലും അതിന്റെ പങ്ക് പൂർണ്ണമായും അതിർത്തി ഏറ്റെടുക്കുമ്പോൾ, ഏത് സന്ദർഭങ്ങളിൽ രൂപരേഖ ആവശ്യമാണ്? ധാരാളം സാഹചര്യങ്ങളൊന്നുമില്ല, പക്ഷേ അവ സംഭവിക്കുന്നു:

• സങ്കീർണ്ണമായ മൾട്ടി-കളർ ഫ്രെയിമുകൾ സൃഷ്ടിക്കുന്നു;
• നിങ്ങൾ മൗസ് ഹോവർ ചെയ്യുമ്പോൾ മൂലകത്തിലേക്ക് ഒരു ഫ്രെയിം ചേർക്കുന്നു;
• ഫോക്കസ് ലഭിക്കുമ്പോൾ ചില ഘടകങ്ങളിലേക്ക് ബ്രൗസർ സ്വയമേവ ചേർക്കുന്ന ബോർഡർ മറയ്ക്കുന്നു;
• ഔട്ട്‌ലൈനിനായി, നിങ്ങൾക്ക് ഔട്ട്‌ലൈൻ-ഓഫ്‌സെറ്റ് പ്രോപ്പർട്ടി ഉപയോഗിച്ച് മൂലകത്തിന്റെ അരികിൽ നിന്ന് ഫ്രെയിമിലേക്കുള്ള ദൂരം സജ്ജീകരിക്കാൻ കഴിയും.

മൾട്ടി-കളർ ഫ്രെയിമുകൾ

ഉദാഹരണം 1 ൽ കാണിച്ചിരിക്കുന്നതുപോലെ, ബാഹ്യരേഖ ഒരു തരത്തിലും ബോർഡർ മാറ്റിസ്ഥാപിക്കുന്നില്ലെന്നും അതിനോടൊപ്പം എളുപ്പത്തിൽ നിലനിൽക്കുമെന്നും നിങ്ങൾ മനസ്സിലാക്കേണ്ടതുണ്ട്.

ഉദാഹരണം 1: ഒരു ഫ്രെയിം സൃഷ്ടിക്കുന്നു

ഈ ഉദാഹരണത്തിൽ, മൂലകത്തിന് ചുറ്റും ഒരു കറുത്ത ഫ്രെയിം ചേർത്തിരിക്കുന്നു, അത് പശ്ചാത്തലത്തിൽ നിന്ന് വെളുത്ത ബോർഡർ ഉപയോഗിച്ച് വേർതിരിച്ചിരിക്കുന്നു (ചിത്രം 1).

അരി. 1. മൂലകത്തിന് ചുറ്റുമുള്ള ഫ്രെയിം

ഉപയോഗിക്കുമ്പോൾ ഫ്രെയിം: ഹോവർ

ബോർഡർ വഴി ഒരു ഫ്രെയിം ചേർക്കുമ്പോൾ, മൂലകത്തിന്റെ വീതി വർദ്ധിക്കുന്നു, ഇത് ബോർഡറും : ഹോവർ സ്യൂഡോ-ക്ലാസും സംയോജിപ്പിക്കുമ്പോൾ വളരെ ശ്രദ്ധേയമാണ്. ഇത് "വിജയിക്കാൻ" രണ്ട് വഴികളുണ്ട്. ബോർഡർ മാറ്റി ഔട്ട്‌ലൈൻ ചെയ്യുക എന്നതാണ് ഏറ്റവും ലളിതമായ കാര്യം, അത് നമുക്കറിയാവുന്നതുപോലെ, മൂലകത്തിന്റെ വലുപ്പത്തെ ബാധിക്കില്ല (ഉദാഹരണം 2).

ഉദാഹരണം 2: ഫ്രെയിം ഓൺ ഹോവർ

വൃത്താകൃതിയിലുള്ള കോണുകൾ അതിനെ ബാധിക്കാത്തതിനാൽ രൂപരേഖ എല്ലായ്പ്പോഴും അനുയോജ്യമല്ല. രണ്ടാമത്തെ രീതി ഇവിടെ അനുയോജ്യമാണ് - ഒരു അദൃശ്യ ഫ്രെയിം അല്ലെങ്കിൽ പശ്ചാത്തല നിറവുമായി പൊരുത്തപ്പെടുന്ന ഒരു ഫ്രെയിം ചേർക്കുക, തുടർന്ന് ഹോവർ ചെയ്യുമ്പോൾ അതിന്റെ പാരാമീറ്ററുകൾ മാറ്റുക (ഉദാഹരണം 3). അപ്പോൾ മൂലകത്തിന്റെ സ്ഥാനചലനം സംഭവിക്കില്ല, കാരണം ഫ്രെയിം തുടക്കത്തിൽ തന്നെ നിലവിലുണ്ട്. എന്നാൽ മൂലകത്തിന്റെ വീതി അടങ്ങിയിരിക്കുന്നുവെന്ന് ഞങ്ങൾ എപ്പോഴും ഓർക്കുന്നു വീതി മൂല്യങ്ങൾ, ഇടതുവശത്ത് ബോർഡറും വലതുവശത്ത് ബോർഡറും. ഉയരത്തിലും സ്ഥിതി സമാനമാണ്.

ഉദാഹരണം 3: ഫ്രെയിം ഓൺ ഹോവർ

ഫോം ഫീൽഡുകൾക്ക് ചുറ്റുമുള്ള ബോർഡർ

ചില ബ്രൗസറുകളിൽ (Chrome, Safari, ഏറ്റവും പുതിയ പതിപ്പുകൾഓപ്പറ) ഫോക്കസ് ലഭിക്കുമ്പോൾ ഫോം ഫീൽഡുകൾക്ക് ചുറ്റും ഒരു ചെറിയ ഐക്കൺ പ്രദർശിപ്പിക്കും. കളർ ഫ്രെയിം(ചിത്രം 2). ഇത് നീക്കംചെയ്യുന്നതിന്, ശൈലികളിലെ ഔട്ട്‌ലൈൻ പ്രോപ്പർട്ടിയിലേക്ക് ഇത് ചേർക്കുക ഒന്നിനും വിലയില്ല, ഉദാഹരണം 4 ൽ കാണിച്ചിരിക്കുന്നതുപോലെ.

അരി. 2. അരികുകൾക്ക് ചുറ്റും ഫ്രെയിം ചെയ്യുക

ഉദാഹരണം 4. ഫ്രെയിം നീക്കം ചെയ്യുന്നു

ബോക്സ്-ഷാഡോ വഴിയുള്ള ഫ്രെയിമുകൾ

ബോക്സ്-ഷാഡോ പ്രോപ്പർട്ടി ഒരു ഘടകത്തിന് ചുറ്റും ഒരു നിഴൽ ചേർക്കാൻ ഉദ്ദേശിച്ചുള്ളതാണെങ്കിലും, ബോർഡറോ ഔട്ട്‌ലൈനോ ഉപയോഗിച്ച് സൃഷ്ടിക്കാൻ കഴിയാത്ത ബോർഡറുകൾ സൃഷ്ടിക്കാനും ഇത് ഉപയോഗിക്കാം. നിഴലുകളുടെ എണ്ണം പരിധിയില്ലാത്തതായിരിക്കുമെന്ന വസ്തുതയ്ക്ക് ഇത് നന്ദി പറയുന്നു, അവയുടെ പാരാമീറ്ററുകൾ കോമകളാൽ വേർതിരിച്ചിരിക്കുന്നു.

ഒരു ഫ്രെയിം ലഭിക്കുന്നതിന്, ആദ്യത്തെ മൂന്ന് പാരാമീറ്ററുകൾ പൂജ്യമായി സജ്ജമാക്കണം; അവ നിഴലിന്റെ സ്ഥാനത്തിനും അതിന്റെ മങ്ങലിനും ഉത്തരവാദികളാണ്. നാലാമത്തെ പാരാമീറ്റർ ഈ സാഹചര്യത്തിൽബോർഡറിന്റെ കട്ടിക്ക് ഉത്തരവാദിയാണ്, അഞ്ചാമത്തേത് അതിർത്തിയുടെ നിറം നിശ്ചയിക്കുന്നു. രണ്ടാമത്തെ ഫ്രെയിമിന്, നാലാമത്തെ പാരാമീറ്റർ രണ്ട് ഫ്രെയിമുകളുടെ കനം തുകയ്ക്ക് തുല്യമാണ്.

ഒരൊറ്റ ബോക്സ്-ഷാഡോ പ്രോപ്പർട്ടി ഉപയോഗിച്ച് വലതുവശത്ത് രണ്ട് ഫ്രെയിമുകളും ഒരു ബോർഡറും എങ്ങനെ ചേർക്കാമെന്ന് ഉദാഹരണം 4 കാണിക്കുന്നു.

ഉദാഹരണം 4: ബോക്സ്-ഷാഡോ ഉപയോഗിക്കുന്നത്

ഈ ഉദാഹരണത്തിന്റെ ഫലം ചിത്രത്തിൽ കാണിച്ചിരിക്കുന്നു. 3.

അരി. 3. ബോക്സ്-ഷാഡോ പ്രോപ്പർട്ടി സൃഷ്ടിച്ച ഫ്രെയിമുകൾ

CSS3 ഫ്രെയിംഅനുവദിക്കുന്ന പ്രോപ്പർട്ടികൾ ഉപയോഗിച്ച് എലമെന്റ് ബോർഡറുകൾ ഫോർമാറ്റ് ചെയ്യാനുള്ള കഴിവ് പൂർത്തീകരിക്കുന്നു കോണുകൾക്ക് ചുറ്റുംഘടകം, കൂടാതെ ഉപയോഗം ചിത്രങ്ങൾമൂലകത്തിന്റെ അതിരുകൾ രൂപകൽപ്പന ചെയ്യാൻ.

വൃത്താകൃതിയിലുള്ള കോണുകളും ചിത്ര ഫ്രെയിമുകളും

1. ബോർഡർ-റേഡിയസ് ഉപയോഗിച്ച് വൃത്താകൃതിയിലുള്ള കോണുകൾ

ബ്രൗസർ പിന്തുണ

IE: 9.0
ഫയർഫോക്സ്: 4.0
ക്രോം: 4.0
സഫാരി: 5.0, 3.1 -വെബ്കിറ്റ്-
ഓപ്പറ: 10.5
iOS സഫാരി: 7.1
ഓപ്പറ മിനി: —
ആൻഡ്രോയിഡ് ബ്രൗസർ: 4.1
ക്രോം ആൻഡ്രോയിഡിനായി: 44

ഇൻലൈൻ, ബ്ലോക്ക് ഘടകങ്ങളുടെ കോണുകൾ റൗണ്ട് ചെയ്യാൻ പ്രോപ്പർട്ടി നിങ്ങളെ അനുവദിക്കുന്നു. ഓരോ കോണിനുമുള്ള വക്രം അതിന്റെ ആകൃതി നിർവചിക്കുന്ന ഒന്നോ രണ്ടോ ആരം ഉപയോഗിച്ചാണ് നിർവചിച്ചിരിക്കുന്നത് - വൃത്തംഅഥവാ ദീർഘവൃത്തം. ഘടകത്തിന് ബോർഡർ ഇല്ലെങ്കിൽപ്പോലും, പശ്ചാത്തല-ക്ലിപ്പ് പ്രോപ്പർട്ടി ഉപയോഗിച്ച് സെക്കന്റിന്റെ കൃത്യമായ സ്ഥാനം നിർണ്ണയിക്കപ്പെടുന്നു.

ബോർഡർ-റേഡിയസ് പ്രോപ്പർട്ടി നിങ്ങളെ എല്ലാ കോണുകളും ഒരേസമയം റൗണ്ട് ചെയ്യാൻ അനുവദിക്കുന്നു, കൂടാതെ ബോർഡർ-മുകളിൽ-ഇടത്-റേഡിയസ്, ബോർഡർ-മുകളിൽ-വലത്-റേഡിയസ്, ബോർഡർ-താഴെ-വലത്-റേഡിയസ്, ബോർഡർ-ബോട്ടം-ഇടത്-റേഡിയസ് പ്രോപ്പർട്ടികൾ ഉപയോഗിച്ച് നിങ്ങൾക്ക് ഓരോ കോണിലും പ്രത്യേകം റൗണ്ട് ചെയ്യാം.

ബോർഡർ-റേഡിയസ് പ്രോപ്പർട്ടിക്കായി നിങ്ങൾ രണ്ട് മൂല്യങ്ങൾ സജ്ജീകരിച്ചാൽ, ആദ്യ മൂല്യം റൗണ്ട് ചെയ്യും മുകളിൽ ഇടത്ഒപ്പം താഴെ വലത് മൂല, രണ്ടാമത്തേത് - മുകളിൽ വലത്ഒപ്പം താഴെ ഇടതുഭാഗത്ത്.

നിർവചിച്ച മൂല്യങ്ങൾ / നിർണ്ണയിക്കുക തിരശ്ചീനമായഒപ്പം ലംബമായ ആരങ്ങൾ. സ്വത്ത് പാരമ്പര്യമായി ലഭിച്ചതല്ല.

ഓപ്ഷനുകൾ

div (വീതി: 100px; ഉയരം: 100px; അതിർത്തി: 5px ഖര;).r1 (ബോർഡർ-റേഡിയസ്: 0 0 20px 20px;).r2 (ബോർഡർ-റേഡിയസ്: 0 10px 20px;).r3 (ബോർഡർ-റേഡിയസ്: 20px: 20px ;;); (ബോർഡർ-റേഡിയസ്: 50%;).r8 (ബോർഡർ-മുകളിൽ: ഒന്നുമില്ല; ബോർഡർ-ബോട്ടം: ഒന്നുമില്ല; ബോർഡർ-റേഡിയസ്: 30px/90px;).r9 (ബോർഡർ-ബോട്ടം-ലെഫ്റ്റ്-റേഡിയസ്: 100px;).r10 ( ബോർഡർ -റേഡിയസ്: 0 100%;).r11 (ബോർഡർ-റേഡിയസ്: 0 50% 50% 50%;).r12 (ബോർഡർ-മുകളിൽ-ഇടത്-ആരം: 100% 20px; ബോർഡർ-താഴെ-വലത്-റേഡിയസ്: 100% 20px ;)
അരി. 1. ഉദാഹരണങ്ങൾ വിവിധ ഓപ്ഷനുകൾറൗണ്ടിംഗ് ബ്ലോക്ക് കോണുകൾ

2. ബോർഡർ-ചിത്രം

ബ്രൗസർ പിന്തുണ

IE: 11.0
ഫയർഫോക്സ്: 15.0, 3.5 -moz-
ക്രോം: 16.0, 7.0 -വെബ്കിറ്റ്-
സഫാരി: 6.0, 3.0 -വെബ്കിറ്റ്-
ഓപ്പറ: 15.0, 11.0 -o-
iOS സഫാരി: 7.1
ഓപ്പറ മിനി: 8-o-
ആൻഡ്രോയിഡ് ബ്രൗസർ: 4.4, 4.1 -വെബ്കിറ്റ്-
Android-നുള്ള Chrome: 42

ഘടകത്തിന്റെ ഫ്രെയിമായി ഒരു ഇമേജ് സജ്ജമാക്കാൻ പ്രോപ്പർട്ടി നിങ്ങളെ അനുവദിക്കുന്നു. ചിത്രത്തിന്റെ പ്രധാന ആവശ്യകത അത് സമമിതി ആയിരിക്കണം എന്നതാണ്. സ്വത്ത് ഉൾപ്പെടുന്നു ഇനിപ്പറയുന്ന മൂല്യങ്ങൾ: (ബോർഡർ-ചിത്രം: വീതി ഉറവിട സ്ലൈസ് ആവർത്തന ഔട്ട്സെറ്റ്;) .

ഇതിന്റെ സഹായത്തോടെ ലളിതമായ ചിത്രംഒരു ഘടകത്തിനായി നിങ്ങൾക്ക് ഈ ഫ്രെയിമുകൾ ലഭിക്കും.

/* ഉദാഹരണം 1 */ div (വീതി: 260px; ഉയരം: 100px; ബോർഡർ-സ്റ്റൈൽ: സോളിഡ്; ബോർഡർ-ഇമേജ്-വീഡ്: 15px; ബോർഡർ-ഇമേജ്-ഉറവിടം: url(border_round.png); ബോർഡർ-ഇമേജ്-സ്ലൈസ്: 30 ; ബോർഡർ-ഇമേജ്-ആവർത്തനം: നീട്ടുക; ) /* ഉദാഹരണം 2 */ div (വീതി: 260px; ഉയരം: 100px; ബോർഡർ-സ്റ്റൈൽ: സോളിഡ്; ബോർഡർ-ഇമേജ്-വീതി: 15px; ബോർഡർ-ഇമേജ്-ഉറവിടം: url(border_round. png); ബോർഡർ-ഇമേജ്-സ്ലൈസ്: 30; ബോർഡർ-ഇമേജ്-ആവർത്തനം: റൗണ്ട്;)
അരി. 2. ഒരു ഇമേജ് ഉപയോഗിച്ച് ബ്ലോക്ക് അതിർത്തികൾ രൂപകൽപ്പന ചെയ്യുന്നതിനുള്ള ഒരു ഉദാഹരണം

കട്ട്സ് എ - ബി - സി - ഡി ഫ്രെയിമിന്റെ കോണുകൾ ഉണ്ടാക്കുന്നു, അവയ്ക്കിടയിൽ സ്ഥിതിചെയ്യുന്ന ഡിസൈനിന്റെ ഭാഗം ഫ്രെയിമിന്റെ ശേഷിക്കുന്ന ഇടം അനുസരിച്ച് പൂരിപ്പിക്കുന്നു നൽകിയ മൂല്യംബോർഡർ-ഇമേജ്-ആവർത്തന പ്രോപ്പർട്ടികൾ. ബോർഡർ-ഇമേജ്-സ്ലൈസ് പ്രോപ്പർട്ടി മൂല്യം ഉപയോഗിച്ച് കോർണർ ഭാഗത്തിന്റെ വലുപ്പം (ഈ ഉദാഹരണത്തിൽ നമ്പർ 30) സജ്ജീകരിച്ചിരിക്കുന്നു.

2.1 അതിർത്തി-ചിത്രത്തിന്റെ വീതി

ഘടകത്തിന്റെ ബോർഡറിനുള്ള ചിത്രത്തിന്റെ വീതി പ്രോപ്പർട്ടി വ്യക്തമാക്കുന്നു. വീതി വ്യക്തമാക്കിയിട്ടില്ലെങ്കിൽ, അത് ഡിഫോൾട്ട് 1 ആയി മാറുന്നു.

അതിർത്തി-ചിത്രത്തിന്റെ വീതി
മൂല്യങ്ങൾ:
നീളം	ബോർഡർ വീതി നീളമുള്ള യൂണിറ്റുകളിൽ സജ്ജീകരിക്കുന്നു - px / em . നിങ്ങൾക്ക് ഒരു സമയം ഒന്ന് മുതൽ നാല് വരെ മൂല്യങ്ങൾ സജ്ജമാക്കാൻ കഴിയും. ഒരു മൂല്യം വ്യക്തമാക്കിയിട്ടുണ്ടെങ്കിൽ, ഫ്രെയിമിന്റെ എല്ലാ വശങ്ങളുടെയും വീതി ഒന്നുതന്നെയാണ്, രണ്ട് മൂല്യങ്ങൾ മുകളിൽ-താഴെയും വലത്-ഇടത്തേയും വീതി വ്യക്തമാക്കുന്നു.
നമ്പർ	ബോർഡർ-വിഡ്ത്ത് മൂല്യം ഗുണിക്കുന്ന സംഖ്യാ മൂല്യം.
%	ഘടകത്തിന്റെ ഫ്രെയിമിന്റെ വീതി ചിത്രത്തിന്റെ വലുപ്പവുമായി ബന്ധപ്പെട്ട് കണക്കാക്കുന്നു. വീതിയുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ തിരശ്ചീനമായി, ലംബമായി - ഉയരവുമായി ബന്ധപ്പെട്ടിരിക്കുന്നു.
ഓട്ടോ	ബോർഡർ-ഇമേജ്-സ്ലൈസ് മൂല്യവുമായി പൊരുത്തപ്പെടുന്നു.
പ്രാഥമിക
അനന്തരാവകാശം

വാക്യഘടന

ഡിവ് (ബോർഡർ-ഇമേജ് വീതി: 30px;) ചിത്രം. 3. ഉപയോഗിച്ച് ഒരു ഇമേജ് ഫ്രെയിമിന്റെ വീതി ക്രമീകരിക്കുന്നതിനുള്ള ഒരു ഉദാഹരണം വിവിധ തരംമൂല്യങ്ങൾ

2.2 അതിർത്തി-ചിത്രം-ഉറവിടം

ബ്ലോക്കിന്റെ അതിരുകൾ അലങ്കരിക്കാൻ ഉപയോഗിക്കുന്ന ചിത്രത്തിലേക്കുള്ള പാത പ്രോപ്പർട്ടി വ്യക്തമാക്കുന്നു.

വാക്യഘടന

ഡിവി (ബോർഡർ-ഇമേജ്-സോഴ്സ്: url(border.png);)

2.3 ബോർഡർ-ഇമേജ്-സ്ലൈസ് ഘടകങ്ങൾ

മൂലകത്തിന്റെ അതിരുകൾ നിർവചിക്കാൻ ഉപയോഗിക്കുന്ന ചിത്രത്തിന്റെ ഭാഗങ്ങളുടെ വലുപ്പം പ്രോപ്പർട്ടി നിർണ്ണയിക്കുകയും ചിത്രത്തെ ഒമ്പത് ഭാഗങ്ങളായി വിഭജിക്കുകയും ചെയ്യുന്നു: നാല് കോണുകൾ, കോണുകൾക്കിടയിലുള്ള നാല് അരികുകൾ, ഒരു കേന്ദ്ര ഭാഗം.

മൂല്യങ്ങൾ:
നമ്പർ	ഒന്നോ രണ്ടോ മൂന്നോ നാലോ മൂല്യങ്ങൾ ഉപയോഗിച്ച് ഫ്രെയിം ഭാഗങ്ങളുടെ വലുപ്പം സജ്ജമാക്കാൻ കഴിയും. മൂലകത്തിന്റെ ഓരോ വശത്തും ഒരേ വലുപ്പമുള്ള ബോർഡറുകളെ ഒരു മൂല്യം സജ്ജമാക്കുന്നു. രണ്ട് മൂല്യങ്ങൾ: ആദ്യത്തേത് മുകളിലെ വലിപ്പം നിർണ്ണയിക്കുന്നു താഴ്ന്ന പരിധി, രണ്ടാമത്തേത് - വലത്തും ഇടത്തും. മൂന്ന് മൂല്യങ്ങൾ: ആദ്യത്തേത് മുകളിലെ അതിർത്തിയുടെ വലുപ്പം നിർണ്ണയിക്കുന്നു, രണ്ടാമത്തേത് - വലത്തോട്ടും ഇടത്തോട്ടും, മൂന്നാമത്തേത് - താഴെയുള്ള അതിർത്തി. നാല് മൂല്യങ്ങൾ: മുകളിൽ, വലത്, താഴെ, ഇടത് ബോർഡറുകളുടെ വലുപ്പങ്ങൾ നിർവചിക്കുന്നു. സംഖ്യാ മൂല്യം px-ന്റെ സംഖ്യയെ പ്രതിനിധീകരിക്കുന്നു.
%	ചിത്രത്തിന്റെ വലുപ്പവുമായി ബന്ധപ്പെട്ട് ബോർഡർ വലുപ്പങ്ങൾ കണക്കാക്കുന്നു. വീതിയുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ തിരശ്ചീനമായി, ലംബമായി - ഉയരവുമായി ബന്ധപ്പെട്ടിരിക്കുന്നു.
പൂരിപ്പിക്കുക	മൂല്യം ഒരു സംഖ്യയോ ശതമാനമോ സഹിതം സൂചിപ്പിച്ചിരിക്കുന്നു. വ്യക്തമാക്കിയിട്ടുണ്ടെങ്കിൽ, ഫ്രെയിമിന്റെ ആന്തരിക അറ്റത്ത് ചിത്രം ഛേദിക്കപ്പെടുന്നില്ല, മാത്രമല്ല ഫ്രെയിമിനുള്ളിലെ പ്രദേശം നിറയ്ക്കുകയും ചെയ്യുന്നു.
പ്രാഥമിക	ഈ പ്രോപ്പർട്ടി അതിന്റെ ഡിഫോൾട്ട് മൂല്യത്തിലേക്ക് സജ്ജീകരിക്കുന്നു.
അനന്തരാവകാശം	പാരന്റ് എലമെന്റിൽ നിന്ന് ഈ വസ്തുവിന്റെ മൂല്യം അവകാശമാക്കുന്നു.

വാക്യഘടന

ഡിവ് (ബോർഡർ-ഇമേജ്-സ്ലൈസ്: 50 20;)
അരി. 4. ഇമേജ് ഫ്രെയിം സ്ലൈസുകൾ വ്യക്തമാക്കുന്നതിനുള്ള ഒരു ഉദാഹരണം

2.4 അതിർത്തി-ചിത്രം-ആവർത്തനം

ഫ്രെയിമിന്റെ കോണുകൾക്കിടയിലുള്ള ഇടം പശ്ചാത്തല ചിത്രം എങ്ങനെ നിറയ്ക്കുന്നു എന്നത് ഈ പ്രോപ്പർട്ടി നിയന്ത്രിക്കുന്നു. ഒരൊറ്റ മൂല്യം അല്ലെങ്കിൽ ഒരു ജോടി മൂല്യങ്ങൾ ഉപയോഗിച്ച് വ്യക്തമാക്കാം.

വാക്യഘടന

ഡിവ് (ബോർഡർ-ഇമേജ്-ആവർത്തനം: ആവർത്തിക്കുക;) ചിത്രം. 5. വ്യത്യസ്ത തരം മൂല്യങ്ങൾ ഉപയോഗിച്ച് ഒരു ഇമേജ് ഫ്രെയിമിന്റെ കേന്ദ്രഭാഗം ആവർത്തിക്കുന്നതിനുള്ള ഉദാഹരണം

2.5 അതിർത്തി-ചിത്രം-പുറം

ഘടകത്തിന്റെ അതിരുകൾക്കപ്പുറത്തേക്ക് ഒരു നിശ്ചിത ദൈർഘ്യത്തിൽ ഇമേജ് ഫ്രെയിം നീക്കാൻ പ്രോപ്പർട്ടി നിങ്ങളെ അനുവദിക്കുന്നു. ഒന്നോ അല്ലെങ്കിൽ ഒന്നോ ഉപയോഗിച്ച് വ്യക്തമാക്കാം നാല് മൂല്യങ്ങൾ.

വാക്യഘടന

ഡിവി (ബോർഡർ-ഇമേജ്-ഔട്ട്സെറ്റ്: 10px;)
അരി. 6. വ്യത്യസ്ത തരം മൂല്യങ്ങൾ ഉപയോഗിച്ച് ഒരു ഇമേജ് ഫ്രെയിം മാറ്റുന്നതിനുള്ള ഒരു ഉദാഹരണം

3. പുറം ഫ്രെയിം ഓഫ്സെറ്റ് ഔട്ട്ലൈൻ-ഓഫ്സെറ്റ്

ബോർഡർ എലമെന്റിന്റെ ബോർഡറും ഔട്ട്‌ലൈൻ പ്രോപ്പർട്ടി ഉപയോഗിച്ച് സൃഷ്‌ടിച്ച ബാഹ്യ അതിർത്തിയും തമ്മിലുള്ള ദൂരം പ്രോപ്പർട്ടി വ്യക്തമാക്കുന്നു.

/*ചിത്രം 1:*/ img (ബോർഡർ: 1px സോളിഡ് പിങ്ക്; ഔട്ട്‌ലൈൻ: 1px ഡാഷ്ഡ് ഗ്രേ; ഔട്ട്‌ലൈൻ-ഓഫ്‌സെറ്റ്: 3px; ) /*ചിത്രം 2:*/ img (ബോർഡർ-വീതി: 1px 10px; ബോർഡർ-സ്റ്റൈൽ: സോളിഡ്; ബോർഡർ-വർണം: പിങ്ക്; ഔട്ട്‌ലൈൻ: 1px ഡാഷ്ഡ് ഗ്രേ; ഔട്ട്ലൈൻ-ഓഫ്സെറ്റ്: 3px; ) /*ചിത്രം 3:*/ img (ബോർഡർ: 3px ഇൻസെറ്റ് പിങ്ക്; ഔട്ട്ലൈൻ: 1px ഡാഷ്ഡ് ഗ്രേ; ഔട്ട്ലൈൻ-ഓഫ്സെറ്റ്: 1px; )
അരി. 7. ഒരു ബാഹ്യ ഫ്രെയിം ഉപയോഗിച്ച് ഒരു ചിത്രം അലങ്കരിക്കാനുള്ള ഒരു ഉദാഹരണം

4. ഗ്രേഡിയന്റ് ഫ്രെയിം

ബോർഡർ-ഇമേജിന്റെ മൂല്യം ഒരു ഇമേജ് മാത്രമല്ല, ഒരു ഗ്രേഡിയന്റ് ഫില്ലും ആകാം.

അർദ്ധസുതാര്യമായ ഫ്രെയിം

നിറങ്ങളിൽ ഒന്ന് സുതാര്യമാണ്. ഈ രീതിയിൽ, നിങ്ങൾക്ക് ഒരു മൂലകത്തിന്റെ എല്ലാ വശങ്ങൾക്കും ഒരേസമയം അല്ലെങ്കിൽ ഓരോ വശത്തിനും വെവ്വേറെ അതിരുകൾ സജ്ജമാക്കാൻ കഴിയും. ബോർഡറിന്റെ കനം നിയന്ത്രിക്കുന്നത് ബോർഡർ-വീഡ്ത്ത് പ്രോപ്പർട്ടിയാണ്.

* (box-sizing:border-box;).wrap (ഉയരം: 200px; പാഡിംഗ്: 25px; പശ്ചാത്തലം: #00E4F6; ) .ഗ്രേഡിയന്റ് (ഉയരം: 150px; വീതി: 50%; മാർജിൻ: 0 ഓട്ടോ; ബോർഡർ: 10px ഖര സുതാര്യം ;ബോർഡർ-ഇമേജ്: ലീനിയർ-ഗ്രേഡിയന്റ് (വലത്തേക്ക്, സുതാര്യമായ 0%, #ADF2F7 100%); ബോർഡർ-ഇമേജ്-സ്ലൈസ്: 1; )

തപാൽ കവർ

* (box-sizing:border-box;).wrap (ഉയരം: 200px; പാഡിംഗ്: 25px; ) .gradient (ഉയരം: 150px; വീതി: 50%; മാർജിൻ: 0 ഓട്ടോ; ബോർഡർ: 10px സോളിഡ് സുതാര്യം; ബോർഡർ-ചിത്രം: 10 ആവർത്തന-രേഖീയ-ഗ്രേഡിയന്റ് (45ഡിഗ്രി, #A7CECC, #A7CECC 10px, സുതാര്യമായ 10px, സുതാര്യമായ 20px, #F8463F 20px, #F8463F 30px, സുതാര്യമായ 30px, സുതാര്യം) 40px);

CSS3 ബോക്സ്-ഷാഡോ പ്രോപ്പർട്ടിയുടെ രസകരമായ ഒരു ആപ്ലിക്കേഷൻ സൃഷ്ടിക്കുക എന്നതാണ് ഇരട്ട ഫ്രെയിംമൂലകത്തിന് ചുറ്റും. വളരെ രസകരമായ പ്രഭാവംപേജ് രൂപകൽപനയ്‌ക്കായി, പക്ഷേ ബോക്‌സ് ഷാഡോയെ പിന്തുണയ്ക്കുന്ന ബ്രൗസറുകളുടെ പുതിയ പതിപ്പുകളിൽ മാത്രമേ ഇത് പ്രവർത്തിക്കൂ.

എന്നിരുന്നാലും, ഈ പ്രഭാവം സൃഷ്ടിക്കുന്നതിന് മറ്റ് നിരവധി മാർഗങ്ങളുണ്ട്. മാത്രമല്ല, വ്യക്തമായ ഉപയോഗം പശ്ചാത്തല ചിത്രംആദർശത്തിൽ നിന്ന് വളരെ അകലെയാണ്.

IN ഈ പാഠംഒരു ഘടകത്തിന് ചുറ്റും ഇരട്ട ബോർഡർ സൃഷ്ടിക്കുന്നതിന് അഞ്ച് രീതികൾ അവതരിപ്പിക്കുന്നു. മാത്രമല്ല, അവയിലൊന്നിന് മാത്രമേ ഒരു ചിത്രം ആവശ്യമുള്ളൂ, മറ്റുള്ളവരെല്ലാം ഉപയോഗിക്കുന്നു ശുദ്ധമായ കോഡ്കൂടെ CSS മികച്ച പിന്തുണബ്രൗസറുകളിൽ.

രീതി 1: അതിർത്തിയും രൂപരേഖയും

ഔട്ട്‌ലൈൻ പ്രോപ്പർട്ടി പിന്തുണയ്ക്കുന്ന ബ്രൗസറുകളിൽ മാത്രമേ ഈ രീതി പ്രവർത്തിക്കൂ (എല്ലാം IE6/7 ഒഴികെ). നിങ്ങൾ എലമെന്റിലേക്ക് ബോർഡറും ഔട്ട്‌ലൈൻ പ്രോപ്പർട്ടിയും ചേർക്കുന്നു.

ഒന്ന് (ബോർഡർ: സോളിഡ് 6px #fff; ഔട്ട്‌ലൈൻ: സോളിഡ് 6px #888;)

ഈ രീതി പ്രവർത്തിക്കാനുള്ള കാരണം ഇതാണ് ഔട്ട്ലൈൻ ഫ്രെയിംദീർഘചതുരത്തിന്റെ പുറത്ത് എപ്പോഴും പ്രദർശിപ്പിക്കും. ഫ്ലോട്ടുചെയ്‌ത ഘടകങ്ങൾ ഉപയോഗിക്കുമ്പോൾ ഔട്ട്‌ലൈൻ പ്രോപ്പർട്ടിയിലെ പ്രശ്‌നം സംഭവിക്കുന്നു, കാരണം ബോർഡർ അടുത്തുള്ള ഘടകങ്ങളുമായി ഓവർലാപ്പ് ചെയ്യുന്നു.

രീതി 2: കപട ഘടകം

ഈ രീതി ആവശ്യമാണ് കേവല സ്ഥാനനിർണ്ണയംചട്ടക്കൂട്:

രണ്ട് (ബോർഡർ: സോളിഡ് 6px #fff; സ്ഥാനം: ബന്ധു; z-ഇൻഡക്സ്: 1; ) .രണ്ട്:മുമ്പ് (ഉള്ളടക്കം: ""; ഡിസ്പ്ലേ: ബ്ലോക്ക്; സ്ഥാനം: കേവലം; മുകളിൽ: -12px; ഇടത്: -12px; ബോർഡർ: സോളിഡ് 6px #888; വീതി: 312px; പാഡിംഗ്-ബോട്ടം: 12px; മിനിട്ട്-ഉയരം: 100%; z-ഇൻഡക്സ്: 10; )

പ്രധാന പോയിന്റുകൾ z-ഇൻഡക്സ് പ്രോപ്പർട്ടി സജ്ജീകരിക്കുന്നു (അതിനാൽ കപട ഘടകം ഉള്ളടക്കത്തെ ഓവർലാപ്പ് ചെയ്യുന്നു), സ്ഥാനനിർണ്ണയം, കുറഞ്ഞ ഉയരം മൂല്യം എന്നിവയാണ്. പിന്നീടുള്ള സ്വത്ത് ഫ്രെയിമിന്റെ ഇലാസ്തികത സംരക്ഷിക്കുന്നു.

രീതി 3: നിഴൽ

മിക്കതും മികച്ച രീതി, ബോക്‌സ്-ഷാഡോ പ്രോപ്പർട്ടി ക്രമീകരണങ്ങൾക്കൊപ്പം ഒരു വരി കോഡ് മാത്രമേ ആവശ്യമുള്ളൂ.

മൂന്ന് (ബോക്സ്-ഷാഡോ: 0 0 0 6px #fff, 0 0 0 12px #888; )

ഇരട്ട ഫ്രെയിം ദൃശ്യമാക്കാൻ രണ്ട് ഷാഡോകൾ ഉപയോഗിക്കുന്നു. അവ കോമകളാൽ വേർതിരിച്ചിരിക്കുന്നു. മങ്ങൽ 0 ആയി സജ്ജീകരിച്ചിരിക്കുന്നു. രണ്ടാമത്തെ നിഴൽ ആദ്യത്തേതിനെ ഓവർലാപ്പ് ചെയ്യുന്നതിനാൽ, അതിന് ഇരട്ടിയുണ്ട് കൂടുതൽ വീതി. പ്രധാന നിമിഷം- അതാര്യമായ നിറങ്ങളുടെ ഉപയോഗം, ഫ്രെയിമുകൾക്കിടയിൽ വ്യക്തമായ അതിർത്തി സൃഷ്ടിക്കുന്നു.

ഔട്ട്‌ലൈൻ പ്രോപ്പർട്ടി പോലെ, ബോക്സ്-ഷാഡോയ്ക്ക് യാതൊരു സ്വാധീനവുമില്ല അടുത്തുള്ള ഘടകങ്ങൾഅവ ഓവർലാപ്പ് ചെയ്യാനും കഴിയും. അതിനാൽ, രചനയുടെ രൂപം രൂപപ്പെടുത്തുന്നതിന് ഒരു ഫീൽഡ് സജ്ജമാക്കേണ്ടത് ആവശ്യമാണ്.

സ്വാഭാവികമായും, ബോക്സ്-ഷാഡോ പ്രോപ്പർട്ടിക്കുള്ള പിന്തുണ പുതിയ ബ്രൗസറുകളിലേക്ക് പരിമിതപ്പെടുത്തിയിരിക്കുന്നു.

രീതി 4: അധിക ഡിവി എലമെന്റ്

IN ഈ രീതിഉപയോഗിച്ചു ബാഹ്യ ഘടകം